Question

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

这是我的尝试：

我的模板：

<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，而不是Route。模板无法访问路径上设置的属性。

你的动作处理程序仍然有效的原因是因为在Ember动作中冒泡，首先是Controller，然后是Route，直到它找到一个具有所需名称的动作。

解决方案是将您的逻辑放在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的钩子，默认情况下这样做：

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

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

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

控制器

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 - 如何在点击上添加课程？

1 个答案: