javascript - EmberJS - 如何在点击时添加一个类？

Question

在我的列表中，当用户点击一个水果时，应该添加一个类名作为highlight。我正在为此努力，但没有工作。有人帮我吗？ (当用户选择其他水果时，必须删除之前的水果突出显示)所以只有一个水果在点击时突出显示。

这是我的尝试:

twiddle here

我的模板:

<h2>This is from Index page</h2>
<ul>
{{#each model as |fruit|}}
    <li {{action "selected" fruit}} class="{{if isSelected 'highlight' ''}}" >{{fruit}}</li>
{{/each}}
</ul>

我的路线:

import Ember from 'ember';

export default Ember.Route.extend({
  isSelected : false,
  model(){
    return ["Mango","Orange","Apple"]
  },

  actions : {
    selected(fruit){
      console.log( fruit );
        this.toggleProperty('isSelected');
    }
  }
});

提前致谢

Answer 1

您混淆了路由的范围和 Controller 的范围。

当您在模板中时，范围是 Controller ，而不是路由。该模板无权访问路由上设置的属性。

您的操作处理程序仍然有效的原因是因为在 Ember 操作中冒泡，首先到 Controller ，然后到路由，直到找到具有所需名称的操作。

解决方案是将您的逻辑放在 Controller 中:

export default Ember.Controller.extend({
  isSelected : false,

  actions : {
    selected(fruit){
      this.toggleProperty('isSelected');
    }
  }
});

路线

export default Ember.Route.extend({
  model(){
    return ["Mango","Orange","Apple"]
  }
});

Controller 可以从 Route 访问 model 属性的原因是因为 Route 有一个名为 setupController 的钩子(Hook)，默认情况下这样做:

setupController(controller, model) {
  controller.set('model', model);
}

---

回答您关于一次突出显示一个元素的评论。

一种快速简便的方法是保存 selectedIndex，而不是 isSelected。然后，如果某个项目的索引与所选索引匹配，您就可以将突出显示的类应用于该项目。

Controller

export default Ember.Controller.extend({
  selectedIndex : false,

  actions : {
    selected(idx){
      this.set('selectedIndex', idx);
    }
  }
});

模板:

<h2>This is from Index page</h2>
<ul>
{{#each model as |fruit i|}}
    <li {{action "selected" i}} class="{{if (is-equal i selectedIndex) 'highlight' ''}}" >{{fruit}}</li>
{{/each}}
</ul>

您还需要创建一个用于相等比较的助手

// helpers/is-equal.js
import Ember from 'ember';

export function isEqual([a, b]) {
  return a === b;
}

export default Ember.Helper.helper(isEqual);

或者使用非常好的辅助库:ember-truth-helpers .

Here's an ember-twiddle example .