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

in checkbox click, change which buttons can be clicked

本文关键字：单击 按钮 复选框      更新时间：2023-09-26

我现在从ember开始，我已经制作了所有的静态应用程序，所以我"只"需要在上面创建ember层。

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

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>

所以。。根据选中的复选框数量，我希望允许点击以下操作：

New action = 0 - Infinity checkbox checked (always allowed)
Edit action = 1 - 1 checkboxes checked
Delete action = 1 - Infinity checkbox checked

我的问题。。。我如何将其与操作绑定？？？我真的是Ember的新手，我认为这是一个非常核心的水平。。我学习了很多，但学习曲线太疯狂了。。所以…我在想，我怎么能那样做？首先，我需要在输入中绑定操作，对吗？？？因此：

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

在我的EventController中：

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

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

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

第一种方式：

您需要两个属性来控制某个操作是否可以运行。我们称之为

  • allowEdit
  • allowDelete

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

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

然后维护数字属性，该属性将记录选中了多少复选框，并根据其值设置allowEdit和allowDelete以更正值。

第二种方式：

您还可以使allowEdit和allowDelete的计算属性依赖于model.@each.checked，在计算函数中，您可以检查有多少记录的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;
  });
})

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

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

<span class="controller__legend {{if allowEdit 'allow-edit' 'disable-edit'}}"> Edit </span>
相关文章：