How to set value for input field and have it update on submission to Ember.js action?

Question

On the handlebars template, I'd like to pre-populate an input field with the value. That I can do by putting value=object.property. Then the user should update the value, and when they click the button activating the action, the value should submit to the Component.

The problem is that no value is getting submitted, not the pre-populated value, or the new value. When I console.log what is getting submitted to the component, the input from the text field is "undefined" and the input from the number field is "NaN".

This is my handlebars template:

{{input type="text" value=object.name valueBinding='newName'}}
{{view App.NumberField min='1' value=object.count valueBinding='newCount'}} 
<button {{action updateObjectDetails object}}>Save</button>

The related component it is submitting to:

App.ObjectsDetailsComponent = Ember.Component.extend({
  actions: {
    updateObjectDetails: function(object){
      object.set("name", this.get('newName'))
      object.set("party_size", parseInt(this.get('newCount')))
      object.save();
    }
  }
});

Is there a way to populate the input field with the correct value AND have it submit with the action?

koanima koanima · Accepted Answer · 2014-02-07T14:25:58

Ah, got it. The thing is to not try to use the valueBindings, like you might when creating a new object, but to use the actual value, because the actual value is changing. So in the component, it's object.get('name'), not this.get('newName').

Therefore the handlebars should be like this:

{{input type="text" value=object.name}}
{{view App.NumberField min='1' value=object.count}} 
<button {{action updateObjectDetails object}}>Save</button>

And the component like this:

App.ObjectsDetailsComponent = Ember.Component.extend({
  actions: {
    updateObjectDetails: function(object){
      object.set("name", object.get('name'))
      object.set("party_size", parseInt(object.get('count')))
      object.save();
    }
  }
});

How to set value for input field and have it update on submission to Ember.js action?

1 Answers