如何調用灰燼中的文本字段

上使用keyUp行動剛剛開始與Ember，我想執行一些動作，當用戶鍵入的東西在一個文本字段。我第一次嘗試這個如何調用灰燼中的文本字段

<input type="text" {{bind-attr value=qty}} {{action "checkQty" on="keyUp"}}/>

那正確初始化文本字段的值，並呼籲在我的控制器的actions哈希函數checkQty()，但我不是爲qty得到更新值。所以看起來bind-attr是單向交易。

我嘗試使用TextField觀點：

{{view Ember.TextField value=qty onEvent="keyPress" action="checkQty"}}

我不得不使用keyPress而不是keyUp因爲onEvent only allows enter or keyPress。這工作，除了在keyPress閱讀數量的價值給我的用戶按下鍵之前的字段的值，而不是之後。

所以我結束了使用輸入助手指定字段：

{{input type="text" value=qty}}

在我的控制器中創建一個觀察者：

checkQty: function() { 
    Ember.Logger.log('qty: ', this.get('qty')); 
}.observes('qty').on('change')

這樣的作品，但現在我感到困惑的最好構建我的Ember應用程序的實踐。它似乎似乎像規定的方法是爲您的模板有效地調用您的控制器上的操作。我對觀察者的使用感覺像是一種駭人聽聞的方式，以避免我在模板中無法正常工作。

看着灰燼源代碼後，我才得以延長TextField得到我想要的行爲：

MyApp.TextField = Ember.TextField.extend({ 
    keyUp: function(event) { 
    this.sendAction('action', this.value); 
    } 
});

然後我的模板變成了：

{{view MyApp.TextField value=qty onEvent="keyUp" action="checkQty"}}

有沒有更好的辦法在Ember中完成這項工作？

來源

2014-03-27 molecularbear

你需要利用sendAction方法，使用鍵向上=「actionname」這裏有一個例子

# coffeescript code sample 
window.App = Ember.Application.create() 

# define the keyupaction callback on all TextField views 
Em.TextField.reopen 
    keyUp: (e) -> 
    @sendAction('keyUpAction', e) 

# the keyup callback specific for each controller 
App.ApplicationController = Em.Controller.extend 
    actions: 
    foobar: -> 
     console.log 'do yor validation here' 

# the text field view 
{{view Em.TextField valueBinding="firstName" keyUpAction="foobar"}}

來源

2014-03-27 19:28:50 sandboxws

這也是一個模板，或更好的路線內完成呢，一個組件內。

處理輸入字段（以及與之相關聯的任何其他人）在部件內的數據將利用灰燼的默認值，而不是添加新的邏輯的和簡單地允許處理返回的數據。

//.js 
import Ember from 'ember'; 

export default Ember.Component.extend({ 
    actions: { 
    checkQty(q) { 
     console.log(q); 
    } 
    } 
}); 

//.hbs 
{{input type="text" key-up="checkQty"}}

你可以把它更進了一步，如果你需要通過綁定到你的財產的行動中來編輯輸入的數量。

// .js 
import Ember from 'ember'; 

export default Ember.Component.extend({ 
    qty: 0, 
    actions: { 
    checkQty(q) { 
     console.log(this.get(qty)); 
    } 
    } 
}); 

// .hbs 
{{input type="text" value=qty key-up="checkQty"}}

來源

2017-04-22 00:38:08 BrandonW

如何調用灰燼中的文本字段

回答

相關問題