ember.jsember.js-view

Ember.js: TextField with dynamic binding


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].


Solution

  • 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.