How do you handle pluralisation in Ember?

Question

Are there any helpers for making templates aware of when to use plural words?

In the example below, how do you make the template output "2 dogs have..."?

The code:

Ember.View.create({dog_count: 2})

The template:

{{dog_count}} (dog has)/(dogs have) gone for a walk.

Answer 1

I know this is old, but I needed it today, so here goes.

Ember.Handlebars.registerBoundHelper('pluralize', function(number, opts) {
  var single = opts.hash['s'];
  Ember.assert('pluralize requires a singular string (s)', single);
  var plural = opts.hash['p'] || single + 's';
  return (number == 1) ? single : plural;
});

Usage:

{{questions.length}} {{pluralize questions.length s="Question"}}

or

{{dog_count}} {{pluralize dog_count s="dog has" p="dogs have"}} gone for a walk.

The plural (p=) option is only necessary when you don't want the standard +s behavior.

Answer 2

There is a I18n library for Ember: zendesk/ember-i18n .

There is a handlebars helper t which handles the internationalization by looking up string from Em.I18n.translations :

Em.I18n.translations = {
  'dog.walk.one': '1 dog has gone for a walk.',
  'dog.walk.other': '{{count}} dogs have gone for a walk.'
};

And you can then use the string in your Handlebars template via:

{{t dog.walk countBinding="dogCount"}}

The code above is untested and just taken from the documentation in the README .

---

Another JS I18n library I found is Alex Sexton's messageformat.js .

---

It depends on the complexity of you app, but you can also use a computed property for that, see http://jsfiddle.net/pangratz666/pzg4c/ :

Handlebars :

<script type="text/x-handlebars" data-template-name="dog" >
    {{dogCountString}}
</script>​

JavaScript :

Ember.View.create({
    templateName: 'dog',
    dogCountString: function() {
        var dogCount = this.get('dogCount');
        var dogCountStr = (dogCount === 1) ? 'dog has' : 'dogs have';
        return '%@ %@ gone for a walk.'.fmt(dogCount, dogCountStr);
    }.property('dogCount')
}).append();

Answer 3

If you use Ember Data you can use Ember.Inflector .

var inflector = new Ember.Inflector(Ember.Inflector.defaultRules);

inflector.pluralize('person') //=> 'people'

You can register a new helper with:

Handlebars.registerHelper('pluralize', function(number, single) {
  if (number === 1) { return single; }
  else {
    var inflector = new Ember.Inflector(Ember.Inflector.defaultRules);
    return inflector.pluralize(single);
  }
});

More details at http://emberjs.com/api/data/classes/Ember.Inflector.html

Answer 4

It looks like you got an answer from wycats himself , but I didn't see it mentioned in this thread, so here it is:

Handlebars.registerHelper('pluralize', function(number, single, plural) {
    if (number === 1) { return single; }
    else { return plural; }
});

Answer 5

I recently found this library http://slexaxton.github.com/Jed/ which seems to be a nice tool for JS i18n. I guess you can pretty easily create your own implementation by registering a handlebars helper using this library.

Answer 6

I do not know of any Ember specific functions that will do this for you. However, generally when you pluralize a word, the single version only shows up when the count is one.

See this for an example: http://jsfiddle.net/6VN56/

function pluralize(count, single, plural) {
    return count + " " + (count == 1 ? single : plural);
}

pluralize(1, 'dog', 'dogs') // 1 dog
pluralize(10, 'dog', 'dogs') // 10 dogs
pluralize(0, 'dog', 'dogs') // 0 dogs