Javascript 在复选框单击中，更改可以单击的按钮

我现在开始在余烬，我已经做了我所有的静态应用程序，所以我“只是”需要在上面创建余烬层

在我的事件页面中，我有一个显示事件的列表（事件来自我的数据库）

events.js：

export default = Ember.Route.extend({
 model () {
   return this.store.findAll('event');
 }
});

在我的模板中，我正在做一个循环，它将打印如下内容：

http://codepen.io/anon/pen/YydjwV

如您所见，它是静态的

在此页面中，我有一个控制器，它将根据选中的复选框控制操作：

<ul class="controller__list">
  <li class="controller__item">
    <span class="controller__legend"> New </span>
  </li>
  <li class="controller__item">
    <span class="controller__legend"> Edit </span>
  </li>
  <li class="controller__item">
    <span class="controller__legend"> Delete </span>
  </li>
</ul>

我的问题。。。我如何将其与操作绑定？？？我对灰烬很陌生，我认为这是一个非常核心的层次。。我学习了很多，但是学习曲线太疯狂了。。所以我在想，我怎么能这么做？首先，我需要在输入中绑定操作，对吗？？？因此：

{{input type="checkbox" action='checkBoxClicked'}}

在我的EventController中：

export default = Ember.ArrayController.extend({
 actions: {
   checkBoxClicked () {
      // WHAT NOW? HOW DISABLE THE BUTTONS?
   }
 }
});

我不想知道如何保存、删除、编辑等等。。这很容易，我的问题是理解如何使用组件和根据操作操作html

伙计们，我不是在要求一个完整的答案，我知道SOF不是这样的论坛，但是一盏灯会很好。。一些教程，任何东西。

第一种方式： 您需要两个属性来控制某些操作是否可以运行。我们称之为：

• 允许它

• allowDelete

然后在“新建”中，编辑和删除操作，如果此操作运行，则首先检查属性值。例如：

actions: {
  edit() {
    if (!this.get('allowEdit')) {
      // action not allowed
      return;
    }
    // your logic
  }
}

<span class="controller__legend {{if allowEdit 'allow-edit' 'disable-edit'}}"> Edit </span>

然后维护number属性，该属性将记录选中的复选框数量，并根据其值设置

allowEdit

和

allowDelete

以更正值

第二种方式： 您还可以根据

模型设置
allowEdit
和
allowDelete
计算属性。@each.checked

，在计算函数中，您可以检查有多少记录被选中

设置为
true
，并对它们进行计数（例如在循环中）。然后，如果（用于编辑）检查记录的计数为1，则可以从计算函数
true
返回。否则
false

最重要的部分是将
checked
属性添加到模板内的复选框中，在模型中迭代事件的每个循环中：

{{#each model as |item|}}
  {{input type='checkbox' checked=item.checked}}
{{/each}}

选中复选框后，我可以更改allowX的状态。。
对吧

是的，您可以这样做，例如：

allowEdit: Ember.computed('model.@each.checked', function() {
  let count = 0;
  this.get('model').then(model => { // or simply let model = this.get('model');
    model.forEach(item => {
      if (item.get('checked')) {
        count += 1;
      }
    });
    if (count === 1) {
      return true;
    }
    return false;
  });
})

但是这个按钮中的绑定类呢？例如我有一个
类控制器--禁用。。我想每一次都检查一次
单击复选框可删除此类

您可以使用模板中的控制器属性添加或删除类，例如：

actions: {
  edit() {
    if (!this.get('allowEdit')) {
      // action not allowed
      return;
    }
    // your logic
  }
}

<span class="controller__legend {{if allowEdit 'allow-edit' 'disable-edit'}}"> Edit </span>

编辑
Hei Daniel。。首先，谢谢你的回复！！！。。我明白了。。如果未选中特定数量的复选框，这将真正阻止我的操作。。但是这个按钮中的绑定类呢？例如我有一个类控制器--禁用。。我想每次点击一个复选框来删除这个类时都会选中它。。。我不知道是不是混淆了这个解释哈哈哈..嗯。。我明白了！！！选中复选框后，我可以更改allowX的状态。。对吗？很好。。我明白了！！！！我没想到会有像你这样的好答案。非常感谢丹尼尔：）谢谢你。祝你好运