Parent property is not bind to the child (Ember 2.8)

Question

My code:

signup.emblem:

= validating-form onsubmit=(action 'signUp')
  = input-field value=username
  span {{usernameError}}

validating-form.js:

submit(event) {
  console.log(this.get('username') //undefined
  this.sendAction('onsubmit')
}

signup.js:

actions: {
    signUp() {      
      console.log(this.get('username')) // value from input
    }
  }

As you can see the basic idea is some value in input gets validated in validating-form component and then if everything is fine it'll call some controller action or set some properties.

The problem is that apparently this form component isn't bind to properties from controller, even though its child component (input-field) is. Can you tell me what am I doing wrong here?

If I have to bind it explicitely, is there some way to do that with multiple properties at once?

Answer 1

The problem is that the standard input element isn't two-way bound to your username variable. You can bind it quickly using the action and mut helpers.

(example in handlebars, but you should be able to convert to emblem easily enough)

<input value={{username}} onblur={{action (mut username) value='target.value'}}>

This is saying:

• on the onblur event
• mut(ate) the username
• to match the current target.value - which is the value of the input box

You can see evidence of this working in this twiddle

The other option is Input Helpers

I've not used these, as they don't follow the current Ember thinking of Data Down Actions Up, but it should be as simple as:

{{input value=username}}

And this will two-way-bind directly username.