CODEWITHSUNDEEP
ember.jshandlebars.js
user160917
user160917

Reputation: 9350

Pass variables to ember handlebars

I have an Ember.js ArrayController and some handlebar code that looks like this

<p>{{length}} {{pluralize length "thing"}}</p>

Then I've got a handlebar helper that looks like

Handlebars.registerHelper('pluralize', function(count, str){
    debugger;
    return (count > 1 ? str+"s" : str);
  }
);

When the debugger breaks I observe seeing that count = 'length' not a number like I would expect.

So what gives? What's the correct way to accomplish my obvious task.

Upvotes: 1

Views: 4013

Answers (3)

cyberz
cyberz

Reputation: 913

Using Ember.registerBoundHelper will make all the key-value pairs in the template available as an hash on the 2nd parameter of the helper:

Handlebars template:

{{orderShow dataOrderBy key1="value1" key2="value2" ... keyN="valueN"}}

Javascript:

Ember.Handlebars.registerBoundHelper('orderShow', function(order, options) {
  if(options) {
    for(var prop in options.hash) {
            alert(prop + '="' + options.hash[prop] + '"')
    }
  }

  return order;
}

This behaviour is described at the end of the following page: http://handlebarsjs.com/expressions.html

Upvotes: 1

Bradley Priest
Bradley Priest

Reputation: 7458

Working fiddle here. http://jsfiddle.net/MwTuw/2/

The trick is to use Ember.registerBoundHelper which passes all the relevant data as a final argument to the function.

Ember.Handlebars.registerBoundHelper('pluralize', function (count) {
  var options = Array.prototype.pop.call(arguments);
  var string = options.data.properties[1];
  return (count > 1 ? string+"s" : string);
});

This removes the {{if controller.length}} hack that is required with the other solution and means that adding or removing additional objects will update the value accordingly.

Upvotes: 5

intuitivepixel
intuitivepixel

Reputation: 23322

How about this:

Ember.Handlebars.registerHelper('pluralize', function (property, options) {
  var count = Ember.Handlebars.get(this, property, options);
  var _options = options;
  count = parseInt(count, 10); //to be sure ...
  if (count > 1) {
    _options = _options.concat('s');
  }
  return new Handlebars.SafeString(_options);
});

EDIT

Here is a working fiddle

EDIT 2

Here is your working updated fiddle

Basically the problem was that the handlebar helper was acting when the controller still had no records, I've added a if helper to the template that listen on the controller.length and fires when it changes and so invoking also the handlebar helper to parse the value.

Hope it helps

Upvotes: 2

Related Questions