仅使用{{action}}将活动添加到当前类

Question

你有一些触发动作的物品，这个动作会改变模型的某些属性，de model会自动再次使用新的参数提取。

我想将“有效”添加到当前班级“list-group-item”，但我没有使用{{＃link-to}}，只是简单{{action ...}}

只有{{action ...}}？

才能实现这一点

谢谢，

码

<div class="list-group">
{{#each issues_types as |issueType|}}
<a href="#" class="list-group-item" {{action "setIssueType" issueType.id}}>
    {{issueType.name}}
 <span class="badge">issueType.count</span>
</a>
{{/each}}

Answer 1

调用setIssueType操作时，可以在该特定元素上设置active布尔属性。

我们的第一个选择是将该属性添加到模型本身（不是那么优雅，因为我们正在向数据对象添加与UI相关的属性）。无论如何，它看起来像这样：

<a href="#" class="list-group-item {{if issueType.active 'active' ''}}" {{action "setIssueType" issueType.id}}>

更好的选择是将该链接包含在组件中：

{{!-- app/templates/components/issue-type.hbs }}
<a href="#" class="list-group-item {{if active 'active' ''}}" {{action "setIssueType" model.id}}>
    {{model.name}}
 <span class="badge">model.count</span>
</a>

及其Javascript版本：

// app/components/issue-type.js
export default Ember.Component.extend({
  actions: {
    setIssueType: function(issueType) {
      // since components don't bubble up actions, send it up here
      this.send('setIssueType', issueType);
    }
  }
});

active属性将存在于Component中。模型（issueType）与组件具有1：1的关系，因此active状态将特定于一个模型。

在主模板中：

<div class="list-group">
{{#each issues_types as |issueType|}}
  {{issue-type model=issueType setIssueType='setIssueType' }}
{{/each}}
</div>