第一路：

Question

我现在开始使用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不是这种论坛，但是光线会非常好......一些教程，任何东西..

Answer 1

第一路：

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

allowEdit
allowDelete

然后在new，edit和delete操作中首先检查属性值，如果此操作运行。例如：

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

然后维护数字属性，该属性将记录检查了多少个复选框，并根据它的值集allowEdit和allowDelete来更正值。

第二路：

您还可以使allowEdit和allowDelete计算属性取决于model.@each.checked，在计算函数内，您可以检查有多少记录checked设置为{{1}并计算它们（例如在循环中）。然后你可以从计算函数true返回如果（编辑）这个已检查记录的数量为1.否则true。

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

checked

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

是的，您可以这样做：

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

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

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

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;
  });
})

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

1 个答案:

第一路：

第二路：