Understanding the options in a handlebars #view helper for Ember.JS

Question

This is for Ember.JS version 1.11

I've just started learning Ember and have been tasked with maintaining an existing project. I can see code in many of my handlebars files that looks like this:

 {{#each myitem in controller.mylist}}
    {{#view "loading" story=myitem}}
       {{myitem.name}}<br>
    {{/view}}
 {{/each}}

I can see from this that:

1. Ember will iterate over the objects in the mylist list property of the associated controller.
2. For each item visited (here called myitem ) it will render its name property followed by a linebreak
3. Each item will be rendered using an Ember View called App.LoadingView . This is by virtue of Ember's automatic mapping of the the first parameter of the #view helper, in this case "loading" , to the identifier of the view constructor.

I grok-ed this with the help of the handlebars documentation . However I'm puzzled by the second parameter to the #view helper, being story=myitem . The documentation says:

{{view}} inserts a new instance of an Ember.View into a template passing its options to the Ember.View 's create method and using the supplied block as the view's own template.

So story=myitem appears to be an "option" that is passed to the view controller, which in my code looks like this:

  App.LoadingView = Ember.View.extend({
    didInsertElement: function() {
      this.$().parents().children(".loading").fadeOut(1500);
      this.$().hide().delay(600).fadeIn(500);
    }
  });

I can't seen any reference to story in this constructor, and it does not seem to be a standard #view option.

I also did a global text search in my project for "story" and the only place it appears is in the handlebars files.

So where is it used?

Answer 1

App.LoadingView is a class, not an instance. When Ember needs to create instances of it, it will call create on the instance and pass in the parameters.

In your case, the code corresponding to your template would look something like this:

var j = App.LoadingView.create({
  story: myItem
});

story will end up being a property that just lives right on the loading view instance.