Ember.TextField上keyup事件

提交我把手查看與下面的搜索輸入字段：Ember.TextField上keyup事件

{{view Ember.TextField valueBinding="controller.query" action="submit"}}

當用戶從搜索輸入字段按下「Enter」鍵，我們調用外部API，得到迴應，並相應地查詢結果。下面是控制器的（簡體）版本的代碼：

App.ProductsController = Ember.ArrayController.extend({ 
    submit: function(query) { 
    // call to external api 
    // get response 
    // update some values 
    } 
});

我們如何觸發KeyUp事件，而不是「回車」「提交」功能？換句話說，每當用戶在輸入字段中添加或刪除一個字符時，控制器中的「提交」功能是否可以重新運行？

來源

2013-04-04 user527662

打算通過this，我想你可以添加

keyUp: function(evt) { 
    this.get('controller').send('submit'); 
}

也許

keyUp: function(evt) { 
    this.get('controller').send('submit', this.get('controller.query')); 
}

到您的視圖（或者更確切地說，視圖擴展Ember.TextField）。

另一種可能性可能是與{{action "submit" controller.query on="keyUp"}}一起工作，但我不太確定如何將其與{{view}}幫手結合起來。

來源

2013-04-04 08:38:52

我不相信你可以對視圖進行=「keyUp」，就像你提到的那樣。就前兩個解決方案而言，當我鍵入文本字段時，keyUp：function（evt）{//}不會觸發。閱讀您發送給我的方式的Ember嚮導引用使我相信我需要擴展Ember.TextField並添加某種自定義keyUp屬性 – user527662 2013-04-04 16:43:37

如果使用

HBS：

{{view Ember.TextField valueBinding="controller.query" 
         action="submit" class="my-input"}}

然後在視圖中，您需要訂閱keyUp事件。由於事件在整個視圖中觸發（在這種情況下，僅適用於在視圖內支持此類事件，輸入，內容編輯等的元素），因此您需要檢查您正在查找的輸入。

JS：

App.ProductsView = Ember.View.extend({ 
    keyUp: function (e) { 
    if ($(e.target).hasClass('my-input')) { // you can use other identifier 
     this.get('controller').submit(e.target.value); 
    } 
    } 
});

另一個想法是延長Ember.TextField類：

HBS：

{{view App.ProductTextField valueBinding="controller.query" 
          action="submit"}}

JS：

App.ProductTextField = Ember.TextField.extend({ 
    keyUp: function (e) { 
     this.get('controller').submit(e.target.value); 
    } 
});

其實你並不需要通過p從方法的角度來看，因爲控制器有這個信息已經在query變量中保持最新。

來源

2014-01-18 10:14:40

Ember.TextField上keyup事件

回答

相關問題