How I Started to Understand Model Binding Magic in Ember

I’m learning Ember.js in efforts to stay reasonably up to date with client side web technologies. This hasn’t been the easiest going.

Ember’s best feature is that it easily binds values in HTML to their corresponding properties on objects. I’ve found the implementations of this a little confusing sometimes. Going through the Getting Started guide has been helpful, though this part tripped me up for a good hour, specifically this snippet:

remaining: function() {
  return this.filterBy('isCompleted', false).get('length');
}.property('@each.isCompleted'),

That last line turns the associatied method into a computed property. My understanding of computed properties was as a means to provide a simple call to complex data (eg. a fullName property that joins firstName and lastName properties). This particular method is on a controller, has a previously foreign syntax (@each), and the template that refers to it still uses it’s canonical name (remaining).

In order to understand just what was happening, I pumped the brakes and dug into the sample application. My first question was why they were using a computed property altogether. I whipped up another method and added it to my controller:

remaining: function() {
  return this.filterBy('isCompleted', false).get('length');
}.property('@each.isCompleted'),

derp: function() {
  return 'derp!';
}

{% raw %}

<h1>todos {{derp}}</h1>

{% endraw %}

This resulted in the method body being substituted in the template, which reminded me that {% raw %}{{derp}}{% endraw %} was just printing out whatever derp evaluated to, in this case a function.¹ So I made derp a computed property:

derp: function() {
  return 'derp!';
}.property('what')

This worked. My <h1> was now ‘todos derp!‘. In fact, you could simplify it even more by doing this: property() and leaving off a name altogether. It also demonstrated that the first argument to property didn’t have a bearing on what goes in the Template. Next step was to substitute my static text with something useful.

derp: function() {
  return this.filterBy('isCompleted', false).get('length');
}.property()

And sure enough, the title was now ‘todos 2’. I suspected this would work because my controller extended Ember.ArrayController, giving it access to filterBy. This lead me back to one of my original questions: what is the purpose of '@each.isCompleted'?

I played around with the todo app a little more and noticed that my {% raw %}{{derp}}{% endraw %} was not automatically updating when todos where checked off while the original {% raw %}{{remaining}}{% endraw %} was. Then it hit me: '@each' must be a special directive for an ArrayController that bound that function to the isCompleted property of each object in its array. Putting a console.log('called'); confirmed this suspicion — it’s called every time isCompleted is accessed.

After this bit of forensics, things make a little more sense now. I do wish this association was a little more spelled out in the documentation though for us thick-headed developers.

Written by Scott Williams who lives and works in sunny Phoenix, AZ. Twitter is also a place.