对现有HTML元素的值绑定

Question

正如Emberjs为了将元素值/属性等绑定到控制器所建议的那样，我必须使用Emberjs创建该元素。例如：

App.SearchTextField = Em.TextField.extend({ }); 

和视图：

{{view App.SearchTextField placeholder="Twitter username" 
          valueBinding="App.tweetsController.username"}} 

这意味着，几乎是整个页面的内容应该是Emberjs控制之下。这不是很方便。

是否可以做任何类型的值或事件绑定到现有的元素？

Answer 1

为了让绑定工作，Ember需要知道绑定值何时发生更改才能使其同步。为了让Ember知道一个值已经改变，你需要使用Ember.set。例如：

object.set('value', 'I changed'); 
// This says: Ember, my value has changed, please sync! 

所以，当不使用Ember.set一定的属性发生变化，恩贝尔不知道它应该同步它。因此，我们需要听取这个事件的变化，并告诉Ember使用Ember.set进行更改。

这就是输入值发生的情况。当您键入时，值会更改，但未调用Ember.set。那么Ember.TextField所做的就是听取keyup和change和其他事件，并在其中一个事件被触发时调用Ember.set。

当然，你不有使用它们，但你必须手动听这些变化，并告诉灰烬数值改变：this.set('value', this.$().val())）

我不明白为什么你使用Ember.TextField时出现问题，因为它几乎可以做任何事情，而且它所做的一切都可以节省您自己聆听事件的麻烦。

有一两件事可以帮助你的是，你可以直接使用它在你的模板，而不是创建一个视图来扩展它：

{{view Em.TextField placeholder="Twitter username" valueBinding="username" type="search"}} 

这几乎是等量的打字：

<input type="search" placeholder="Twitter username" value="some value" /> 

注意：从上面提供的示例看来，您似乎在遵循旧的教程，要小心，自那以后很多变化。