Question

我在Ember模板中有一个项目列表，如下所示：

<ul>
  {{#each color in colors}}
    <li {{action 'changeColor' color}}>{{color.hexValue}}</li>
  {{/each}}
</ul>

在我的控制器中，我有以下内容：

Ember.Controller.extend({
  selectedColor: null,
  colors: [
    { 'name': 'black', 'hexValue': '000000' },
    { 'name': 'white', 'hexValue': 'ffffff' },
    { 'name': 'red', 'hexValue': 'ff0000' }
  ],

  actions: {
    changeColor: function(newColor) {
      this.set('selectedColor', 'newColor');
    }
  });

点击颜色时，我想将活动类添加到与所点击的项目对应的<li>。 selectedColor也可以设置为默认颜色（而不是null），并且我喜欢具有相应颜色的<li>以在页面加载时使用活动类。

我见过的其他SO问题是关于如何将{{link-to}}的父元素设置为活动（主要用于Twitter Bootstrap的导航），但在这种情况下，我＆＃39 ;我没有使用{{link-to}}而我没有做路线改变。

有谁知道我怎么能做到这一点？

Answer 1

您的操作不起作用，并且会将选择颜色设置为字符串'newColor'。

无论如何，您可以使用计算属性showColors，其中包括要在模板中呈现的类，如下所示：

App.IndexController = Ember.Controller.extend({
  selectedColor: null,
  colors: [
    { 'name': 'black', 'hexValue': '000000' },
    { 'name': 'white', 'hexValue': 'ffffff' },
    { 'name': 'red', 'hexValue': 'ff0000' }
  ],

  showColors: Ember.computed('colors', 'selectedColor', function(){
    var that = this;
    return this.get('colors').map(function(color){
      return {
        'name': color.name,
        'hexValue': color.hexValue,
        'class': (color.hexValue == that.get('selectedColor.hexValue')) ? 'active' : ''
      };
    });
 }),

  actions: {
    changeColor: function(newColor) {
      this.set('selectedColor', newColor);
    }
  }
});

（Working example）

在Ember中单击项目时，如何将活动类添加到项目列表中？

1 个答案: