mardi 1 septembre 2015

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

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. So where is it used?




Aucun commentaire:

Enregistrer un commentaire