58

I am trying to create a custom helper using Meteor. Following to the doc here: https://github.com/meteor/meteor/wiki/Handlebars

I have tried to define my helper as follows:

Template.myTemplate.testHelper = function(foo, bar, options) {
    console.log(foo);
    console.log(bar);
}

My template looks like:

<template name="myTemplate">
    {{#testHelper "value1" "value2"}}
    {{/testHelper}}
</template>

Looking at my console output, I expected to see 2 lines of output:

value1
value2

However my console looks like:

value1
function (data) {
    // don't create spurious annotations when data is same
    // as before (or when transitioning between e.g. `window` and
    // `undefined`)
    if ((data || Handlebars._defaultThis) ===
        (old_data || Handlebars._defaultThis))
      return fn(data);
    else
      return Spark.setDataContext(data, fn(data));
  } 

Note, I am completely new to meteor, and to handlebars. I think I would be much happier using underscore, but the documentation for meteor glances over underscore almost entirely. Am I doing something wrong defining my helper function? It seems that it is not seeing the second parameter "bar", and instead interpreting that as the options. (Note: if I console.log(options) it returns 'undefined').

Meteor version 0.4.0 (8f4045c1b9)

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
Greg
  • 591
  • 1
  • 4
  • 3

2 Answers2

67

Your logic is good, just make some changes to the template

<template name="myTemplate">
  {{testHelper "value1" "value2"}}
</template>

Bare in mind that the testHelper function is only defined in the myTemplate template.

If you want to register testHelper globally you'll need to do something like this

Handlebars.registerHelper('testHelper', function(foo, bar){
  console.log(foo);
  console.log(bar);
});

Have fun

Rui Gonçalves
  • 1,164
  • 8
  • 15
  • 3
    This is not valid if you need a {{#if}} Content {{/if}} style helper. – Donflopez Sep 10 '13 at 14:29
  • 8
    one can combine the helpers in such scenario: `{{#if testHelper "v1" "v2"}} some Template {{/if}}` – Matanya Oct 05 '13 at 08:54
  • Where is the `Handlebars.registerHelper` supposed to be put? – basickarl Oct 02 '15 at 17:59
  • @KarlMorrison – you can put it really anywhere where client code is run I for example commonly put it in `myApp/client/lib/helpers/template-helpers.js` Also, with newer versions of Meteor you'd want to register each individual helper separately using this syntax: `Template.registerHelper('myHelperName', function(arg1, arg2) { [...] });`. You don't need to wrap this code in anything, just drop it in your template-helper.js as individual code snippets with plenty of whitespace between each of these snippets for readability. ;) – WizzyBoom Nov 20 '15 at 20:19
4

Addition to

<template name="myTemplate">
  {{testHelper "value1" "value2"}}
</template>

Instead of passing a value as a parameter pass the function as parameter Here is the code for that

<template name="myTemplate">
  {{ testHelper1 (testHelper2 "value2") }}
</template>
Soviut
  • 88,194
  • 49
  • 192
  • 260
mad Man
  • 366
  • 3
  • 7
  • That helped me a lot, the ( ) around the second helper was what I was searching for. Really hard to google :) – Mafii Jan 14 '22 at 19:24