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

Question

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.

Heitor B Heitor B · Accepted Answer · 2016-01-26T00:57:46

I've found answer in another post that help me find the solution. The post is:

Ember.js: TextField with dynamic binding

Although, for my purposes, I had to tweak his/her solution a little bit:

Ember.Handlebars.helper('dataTextField', function (key, options) {
    options.hash.valueBinding = 'controller.' + key;
    return Ember.Handlebars.helpers.input.apply(this, [options]);
});

and in the template I call:

{{#each modelField in modelFields}}
    <span>{{modelField.displayName}}</span>
    <span>
        {{dataTextField modelField.name}}
    </span>
{{/each}}

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

1 Answers