lundi 25 janvier 2016

Ember.js/handlebars how to bind variable passed to a component to a model

Let's say I have a model called "Article" with only one property called "title"...

I could write hanblebars to edit the article property like this:

<span>Title</span><span>{{input value=title}}</span>

And Ember/handlebars magically binds the value of that input box to the "title" property value.

No problem there. But I am working on a project in which I will need to generate the handlebars code dynamically, based on a model definition model.

For example, I will not know there is a property called "title", but would have instead to loop into a "modelFields" list in the model definition model.

So, the handlebars will be something like this:

Looking at the code below:

{{#each modelField in modelFields}}
    <span>modelField.displayName</span><span>{{input value=modelField.propertyName}}</span>
{{/each}}

The result HTML for the "title" property will be:

<span>Title</span><span><input value="title"></span>

Now here is my question, is there a way to have the value coming dynamically from propertyName (title, in this example) to be handled by ember as a binding property title, instead of a string title?

To clarify, is there a way for the result of this:

{{#each modelField in modelFields}}
    <span>modelField.displayName</span><span>{{input value=modelField.propertyName}}</span>
{{/each}}

to be treated as this (title is a binding property):

<span>Title</span><span>{{input value=title}}</span>

instead of this (title is a string):

<span>Title</span><span><input value="title"></span>

?

I tried with views,components, with no luck.




Aucun commentaire:

Enregistrer un commentaire