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 given there does not work anymore. They use the following view there:

App.AutoTextField = Ember.ContainerView.extend({
    type: null,
    name: null,

    init: function() {
        this._super();
        this.createChildView();
    },
    createChildView: function() {
         this.set('currentView', Ember.TextField.create({
                    valueBinding: 'controller.' + this.get('name'),
                    type: this.get('type')
                }));   
    }.observes('name', 'type')
});

The best I could get until now was replacing the valueBinding with the path _parentView.context.. If I do this the text fields get rendered and they contain the correct value. If I edit them the rest of the application doesn't get updated though.

How would you solve this in the current version of Ember?

Edit: A better explanation of what I want to do is given in the linked question. I have an object (say object) and a string (key) in the current context. I want a text field that can show and render the value of object[key].

score 5 · Accepted Answer · answered Apr 28 '14 at 19:50

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.

score 1 · Answer 2 · answered Jun 22 '16 at 11:02

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))}}

score -1 · Answer 3 · answered Apr 27 '14 at 23:13

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.

Thank you for answering, but that isn't what I wanted to do. My problem is the same as in the linked question. I have an object (say `object`) in the current context and a string (say `property`). I want to get a text field which can show and change the value of `object[property]`. I found a solution for this today and will show it in an answer. — user3575506, Apr 28 '14 at 19:55

Ember.js: TextField with dynamic binding

3 Answers3

Linked