Property in a component not propagating to the template

Question

I'm building a component:

export default Ember.Component.extend({
  tagName:'input',
  classNameBindings: ['form-control','isMissing:input-warning',':form-control'],
  isMissing: false,
  attributeBindings: ['customType:type','customSize:size','value','disabled','placeholder'],
  customType: "text",
  customSize: "50",
  valueBinding:'name',
  disabled:'disabled',
  placeholder:'placeholder',

  focusIn:function(){
    this.sendAction('submit');
  },
  focusOut:function(){
    this.sendAction('cancel');
  }
});

And what happens is that the binded attribute "value" (see line 5 of code, column 4) seems to get the value of 'name' whenever the propagation goes from the template to the component, but not the other way around.

Am I missing something? I read Ember docs on components and this attribute binding should propagate changes in the value of the property in both directions.

Is there an alternative way of binding this value?

Thanks!

EDIT:

HERE'S A JSBIN SHOWING THE PROBLEM:http://emberjs.jsbin.com/jalalamude/1/edit?html,js,output

If templates aren't updating, it's probably due to not using ember setters when you change properties. this.set('blah', 'blahblah'); — carter
Hey, I just edited the post and added a JsBin showing how the problem works. — Nico

Deewendra Shrestha Deewendra Shrestha · Accepted Answer · 2015-05-26T15:33:11

Well you have to understand that the form input element is different from ember input helpers, input helpers maintain the bindings when values are changed and your component needs to do that same. What your component is doing, is creating a input element whose value is set to whatever 'value' property in the component holds, the component renders the element and then doesn't care what user does with it - the point being there is no real "TIE UP" between the component's value property and the "form" input element. You are responsible for doing that. Here is a working jsbin: http://emberjs.jsbin.com/muduxacanu/1/edit

Property in a component not propagating to the template

1 Answers