父属性不与孩子绑定（Ember 2.8）

Question

我的代码：

signup.emblem：

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

验证-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
    }
  }

正如您所看到的，基本思想是输入中的某些值在验证表单组件中得到验证，然后如果一切正常，它将调用某些控制器操作或设置一些属性。

问题是显然这个表单组件不会绑定到控制器的属性，即使它的子组件（input-field）是。你能告诉我这里我做错了什么吗？

如果我必须明确地绑定它，是否有一些方法可以同时使用多个属性？

Answer 1

问题是标准输入元素不是双向绑定到username变量。您可以使用action和mut帮助程序快速绑定它。

（车把中的例子，但你应该能够轻松地转换为徽章）

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

这就是说：

• 关于onblur事件
• mut（吃）用户名
• 匹配当前target.value - 这是输入框的值

您可以在此twiddle

中查看此工作的证据

另一个选项是Input Helpers

我没有使用过这些，因为他们没有遵循当前Ember对Data Down Actions Up的看法，但它应该如此简单：

{{input value=username}}

这将直接双向绑定用户名。