Ember.js: how to add parameters to a View

Question

I guess this is simple but as an Ember newbie I cannot find a solution...

So let's say I have this very simple view:

MyApp.MyTextView = Ember.View.extend({
    template: Ember.Handlebars.compile('{{value}}')
});

And I want to use this view in order to display two different properties of the same object. This sounds like I want to add parameters when I 'call' my view. In a second view I want to be able to do something like the following (supposing my content object is a Person : {firstName: 'toto', lasName: 'titi'}):

MyApp.AnotherView = Ember.View.extend({
    template: Ember.Handlebars.compile('FirstName: {{view MyApp.MyTextView value="content.firstName"}} - LastName: {{view MyApp.MyTextView value="content.lastName"}}')
});

I also tried to use Handlebars helpers as explained here, but It does not work (when I use {{highlight firstName}} or {{highlight content.firstName}} what is displayed is firstName or content.firstName, not the property value...)

Do you guys have any idea? I'm stuck here...

Thanks!

Answer 1

To pass in parameters to your view, you can specify each one like so:

{{view App.MyView firstNameBinding="content.firstName" lastNameBinding="content.lastName"}}

Which would allow you to do:

template: Ember.Handlebars.compile('{{view.firstName view.lastName}}');

However, you can imagine that this will get very long as you add more properties. Therefore you can instead simply pass in your content object as the context (but you don't need to pass it in as context -- although that's for another day):

{{view App.MyView contextBinding="content"}}

(Please note that contextBinding is special, and changes the context in the view.)

That way the view will hold the object you pass in, and so in your view you can now do:

template: Ember.Handlebars.compile('{{firstName lastName}}');

(You can do it like this because content is now your view's context.)

I've knocked you up a quick JSFiddle to elucidate (hopefully!): http://jsfiddle.net/YVCrq/