Ember.js: TextField with dynamic binding

Question

I want to bind a TextField to a property which is specified by a string variable (see the edit for a better explanation), as in this question. Unfortunately the answer that was

Answer 1

It's a little unclear what your use case is from your question but assuming your just trying to get a basic binding on the text field working then the easiest way to bind a value is to use the input helper:

In your template you would use:

{{input type="text" value=inputTextValue}}

where inputTextValue is the property you are binding the value to. Then in your controller you could access the inputTextValue property to either get the value typed in by the user, or to set the value displayed to the user.

Here's a working fiddle:

http://jsfiddle.net/NQKvy/940/

You can find more information on the input helper in the Ember docs here:

http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_input

Hope that helps.

Answer 2

You can bind input values with dynamic keys(variables) of objects with help of mut helper now.

https://guides.emberjs.com/v2.6.0/templates/input-helpers/#toc_binding-dynamic-attribute

We can bind key in input helper like this,

{{input value=(mut (get Object key))}}

Answer 3

After many failed attempts I found a pretty simple solution.

Add the helper

Ember.Handlebars.helper('dataTextField', function (data, key, options) {
    options.hash.valueBinding = 'data.' + key;

    return Ember.Handlebars.helpers.input.apply(this, [options]);
});

and then call

{{dataTextField data key}}

This will render a text field that shows and changes the value of data[key] and it even supports all the optional arguments the normal input helper can understand.