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

Posted 2023-02-19

【中文标题】使用 Ember.js 复选框输入助手触发更改事件的操作？

【英文标题】：Trigger an action on the change event with Ember.js checkbox input helper?

【发布时间】：2014-08-01 00:59:35

【问题描述】：

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

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

模板：

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

控制器：

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

【问题讨论】：

How to get the value of a checkbox of a template in the controller in ember app 的可能重复项

【参考方案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

【讨论】：

我只是在实现这一点上有些挣扎，发现对这种确切情况的解释很有帮助。 thesoftwaresimpleton.com/blog/2015/02/12/emberjs-data-down

【参考方案2】：

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

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

和行动：

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

【参考方案3】：

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

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

link to source

【讨论】：

鉴于 Ember.observers 在 Ember 2.0+ 中是一种反模式，这是一个更好的解决方案。

很棒的更新，重要的是要注意使用括号输入不会将选中的属性绑定到isChecked，它所做的只是设置属性的初始值。

在这种情况下，您如何获得该绑定？我们想做一个单向绑定输入组件，但似乎无法将输入元素的检查值强制为其在组件上的值。

AdamDonahue 我相信您可以将input 用于您的情况。 input type="checkbox" checked=isChecked click=(action "foo" value="target.checked")。或者，如果您决定使用尖括号组件，您可以在单击操作中自己更新值。我做了一个例子，看看这里的第二个复选框选项：ember-twiddle.com/1d4a34f437a66f306ee5d6c5389fb4e2

我迟到了。 “更改”与“点击”大致相同。

【参考方案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" 

【参考方案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

【讨论】：

如果有多个复选框，我将如何使用观察者？我有一个类别模型，我将遍历每个类别并创建一个相应的复选框。这些复选框将用于设置选择哪些类别。

您将使用 itemController，并将每个复选框附加到 itemController 上的属性，并在 itemController 上使用观察者。 emberjs.com/api/classes/Ember.ArrayController.html

这是有道理的。非常感谢您的帮助！

观察者不是解决这个问题的好办法。请改用on="key-up" action="doSomething" 之类的操作。请参阅youtu.be/7PUX27RKCq0，了解 Stefan Penner 对为什么观察者表现不佳且通常不是一个好主意的解释。

这个答案已有一年多的历史了，我有 100 个可能已弃用或不再推荐的答案，请随时在您认为合适的地方用更合适的答案来回答。