EmberJS - 如何在点击时添加 class？

Question

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

这是我的尝试：

我的模板：

<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

您混淆了路由的范围和控制器的范围。

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

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

解决方案是将您的逻辑放在控制器中：

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 的挂钩，默认情况下这样做：

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

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

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

控制器

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.

EmberJS - 如何在点击时添加 class？

EmberJS - how to add a class on click?

javascript

ember.js