對現有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" /> 

注意：從上面提供的示例看來，您似乎在遵循舊的教程，要小心，自那以後很多變化。