使用 Ember.js 复选框输入助手触发更改事件的操作？

Question

如何在 Ember.js 中更改复选框时触发命名操作？任何帮助将不胜感激。

这就是我所拥有的。勾选或取消勾选复选框无效。

模板：

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

控制器：

actions: {
    applyFilter: function() {
        console.log("applyFilter");
    }
}

Answer 1

发布 Ember 版本 >= 1.13 参见 Kori John Roys' answer。

这适用于 1.13 之前的 Ember 版本

---

这是 ember 的 {{input type=checkbox}} 助手中的一个错误。

见https://github.com/emberjs/ember.js/issues/5433

我喜欢有替身的想法。 @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}}

Answer 2

对于使用 Ember > 2.x 的用户：

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

和行动：

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

Answer 3

我想发布对此的更新。在 Ember 1.13.3+ 中，您可以使用以下内容：

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

link to source

Answer 4

在 Ember v1.13 中，只需在我的场合创建一个名为 j-check 的组件即可完成（无需布局内容）：

import Ember from 'ember';

export default Ember.Checkbox.extend({
  change(){
    this._super(...arguments);
    this.get('controller').send(this.get('action'));
  }
});

然后您只需像这样从您的模板中调用它：

{{j-check checked=isOnline action="refreshModel" }}

Answer 5

使用观察者似乎是观察复选框变化的最简单方法

模板

{{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