web-dev-qa-db-ja.com

Ember.jsチェックボックス入力ヘルパーで変更イベントのアクションをトリガーしますか？

Ember.jsのチェックボックスを変更したときに名前付きアクションを起動するにはどうすればよいですか？どんな助けも大歓迎です。

これが私が持っているものです。チェックボックスをオンまたはオフにしても効果はありません。

テンプレート：

{{input type="checkbox" on="change" action="applyFilter"}}

コントローラ：

actions: {
    applyFilter: function() {
        console.log("applyFilter");
    }
}
ember.js
37
Corey Quillen

オブザーバーを使用することは、チェックボックスが変化するのを見る最も簡単な方法のようです

テンプレート

{{input type='checkbox' checked=foo}}

コード

  foo:undefined,
  watchFoo: function(){
    console.log('foo changed');
  }.observes('foo')

例

http://emberjs.jsbin.com/kiyevomo/1/edit

または、アクションを送信するチェックボックスの独自の実装を作成できます

カスタムチェックボックス

App.CoolCheck = Ember.Checkbox.extend({
  hookup: function(){
    var action = this.get('action');
    if(action){
      this.on('change', this, this.sendHookup);
    }
  }.on('init'),
  sendHookup: function(ev){
    var action = this.get('action'),
        controller = this.get('controller');
     controller.send(action,  this.$().prop('checked'));
  },
  cleanup: function(){
    this.off('change', this, this.sendHookup);
  }.on('willDestroyElement')
});

カスタムビュー

{{view App.CoolCheck action='cow' checked=foo}}

例

http://emberjs.jsbin.com/kiyevomo/6/edit

24
Kingpin2k

これに関する更新を投稿したいと思います。 Ember 1.13.3+では、次を使用できます。

<input type="checkbox" 
       checked={{isChecked}} 
       onclick={{action "foo" value="target.checked"}} />

ソースへのリンク

63
Kori John Roys

投稿Emberバージョン> = 1.13 Kori John Roys 'answer） を参照してください。

これはEmber 1.13より前のバージョン用です

これはemberの{{input type=checkbox}}ヘルパー。

https://github.com/emberjs/ember.js/issues/54 を参照してください

私は代役をするというアイデアが好きです。 @ Kingpin2kのソリューションは機能しますが、ビューにグローバルにアクセスすることは非推奨であり、オブザーバーを使用することは適切ではありません。

リンクされたgithub emberの問題では、rwjblueはコンポーネントバージョンを提案します。

App.BetterCheckboxComponent = Ember.Component.extend({
  attributeBindings: ['type', 'value', 'checked', 'disabled'],
  tagName: 'input',
  type: 'checkbox',
  checked: false,
  disabled: false,

  _updateElementValue: function() {
    this.set('checked', this.$().prop('checked'));
  }.on('didInsertElement'),

  change: function(event){
    this._updateElementValue();
    this.sendAction('action', this.get('value'), this.get('checked'));
  },
});

テンプレートでの使用例（「checked」と「disabled」はオプションです）：

{{better-checkbox name=model.name checked=model.checked  value=model.value disabled=model.disabled}}
12
hewsonism

Ember> 2.x：

{{input
  change=(action 'doSomething')
  type='checkbox'}}

およびアクション：

actions: {
  doSomething() {
    console.warn('Done it!');
  }
}
4
Rimian