Javascript 如何根据索引向Ember的{{each}}循环中的项添加Css类Ember.js

我有一个附带菜单的余烬应用程序。 html中的菜单项基于Ember的{{each}}循环。 当用户选择一个菜单项时，我想将该项添加到活动类中

如何将css类添加到Ember的{{each}中的单个项中 根据来自控制器的条件

Html/Hbs：

<ul>
   {{#each menuItem in sideMenuItems}}
      <li {{bind-attr class="isActive: active-class"}} {{ action 'selectMenuItem' _view.contentIndex }}>
         {{ menuItem.text }}
      </li>
   {{/each}}
</ul>

当用户选择一个菜单项时，我想将该项添加到活动类中

由于您使用的是Ember 1.5，我将首先向您展示一些在旧版本中实现这一点的方法。 最简单的方法是向项本身添加一个标志isActive，并将其用作css类的条件。您可以在selectMenuItem操作中将已单击项目的标志设置为true。如果您的逻辑一次只允许一个项目处于活动状态，则还必须将任何当前活动项目的isActive标志重置为false

一种更有效的方法是将当前活动项存储为单独的变量，这样就不需要迭代sideMenuItems数组两次：

控制器：

Ember.ObjectController.extend({
  selectedMenuIndex: 0,
  isActive: function() {
    return (this.get('selectedMenuIndex') == ? ? ? );
  }.property('???'),

  actions: {
    selectMenuItem: function(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
})

Ember.ObjectController.extend({

  sideMenuItems: // ... your array of items, each containing an isActive flag

  actions: {
    selectMenuItem: function(itemIndex) {
      var items = this.get('sideMenuItems');
      items.forEach(function(item, idx) {         // go through the items,
          if(idx === itemIndex) {                 // find the clicked item and set it as active
              Ember.set(item, 'isActive', true);
          } else {                                // reset all other items
              Ember.set(item, 'isActive', false);
          }
      });
    }
  }
})   

Ember.ObjectController.extend({

  sideMenuItems: // ... your array of items, each containing an isActive flag
  activeMenuItem: null,

  actions: {
    selectMenuItem: function(itemIndex) {
      var items = this.get('sideMenuItems');
      var currActive = this.get('activeMenuItem');
      var nextActive = items.objectAt(itemIndex);

      // if there is a currently active item, deactivate it
      if(currActive) {
        Ember.set(currActive, 'isActive', false);
      }

      // if the user clicked on the currently active item, we just reset the selected item
      // otherwise we update the isActive flag for the clicked item
      if(currActive === nextActive) {
          nextActive = null;
      } else {
         Ember.set(nextActive, 'isActive', true);
      }

      // set the clicked item as the currently active menu item
      this.set('activeMenuItem', nextActive);
  }
})  

Ember.ObjectController.extend({
  selectedMenuIndex: 0,

  actions: {
    selectMenuItem: function(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
})

Ember.ObjectController.extend({
  selectedMenuItem: null,

  actions: {
    selectMenuItem: function(item) {
      this.set('selectedMenuItem', item);
    }
  }
})

Ember.Controller.extend({
  selectedMenuIndex: 0,
  menuItems: // ...
  actions: {
    selectMenuItem(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
});

另一种方法是创建自定义组件菜单项，该菜单项根据活动索引呈现具有/不具有类的li项

Ember.Component.extend({

    // passed in
    activeIndex: -1,
    index: -1,
    selectMenuItemAction: '',

    // local
    tagName: 'li',
    classNameBindings: ['activeClass'],

    activeClass: function() {
        var idx = this.get('index');
        var activeIdx = this.get('activeIndex');

        // if the current item is the active index, return the active class
        if(idx === activeIdx) {
            return 'active-class';
        }

        // otherwise return no class
        return '';
    }.property('activeIndex')

    actions: {
        selectMenuItem: function() {
            this.sendAction('selectMenuItemAction', this.get('index'));
        }
    }
})

然后像这样使用它：

{{#each menuItem in sideMenuItems}}
    {{#menu-item index=_view.contentIndex activeIndex=selectedMenuIndex selectMenuItemAction="selectMenuItem"}}
        {{menuItem.text}}
    {{/menu-item}}
{{/each}}

{{#each menuItem in sideMenuItems}}
    {{#menu-item item=menuItem activeItem=selectedMenuItem selectMenuItemAction="selectMenuItem"}}
        {{menuItem.text}}
    {{/menu-item}}
{{/each}}

控制器：

Ember.ObjectController.extend({
  selectedMenuIndex: 0,
  isActive: function() {
    return (this.get('selectedMenuIndex') == ? ? ? );
  }.property('???'),

  actions: {
    selectMenuItem: function(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
})

Ember.ObjectController.extend({

  sideMenuItems: // ... your array of items, each containing an isActive flag

  actions: {
    selectMenuItem: function(itemIndex) {
      var items = this.get('sideMenuItems');
      items.forEach(function(item, idx) {         // go through the items,
          if(idx === itemIndex) {                 // find the clicked item and set it as active
              Ember.set(item, 'isActive', true);
          } else {                                // reset all other items
              Ember.set(item, 'isActive', false);
          }
      });
    }
  }
})   

Ember.ObjectController.extend({

  sideMenuItems: // ... your array of items, each containing an isActive flag
  activeMenuItem: null,

  actions: {
    selectMenuItem: function(itemIndex) {
      var items = this.get('sideMenuItems');
      var currActive = this.get('activeMenuItem');
      var nextActive = items.objectAt(itemIndex);

      // if there is a currently active item, deactivate it
      if(currActive) {
        Ember.set(currActive, 'isActive', false);
      }

      // if the user clicked on the currently active item, we just reset the selected item
      // otherwise we update the isActive flag for the clicked item
      if(currActive === nextActive) {
          nextActive = null;
      } else {
         Ember.set(nextActive, 'isActive', true);
      }

      // set the clicked item as the currently active menu item
      this.set('activeMenuItem', nextActive);
  }
})  

Ember.ObjectController.extend({
  selectedMenuIndex: 0,

  actions: {
    selectMenuItem: function(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
})

Ember.ObjectController.extend({
  selectedMenuItem: null,

  actions: {
    selectMenuItem: function(item) {
      this.set('selectedMenuItem', item);
    }
  }
})

Ember.Controller.extend({
  selectedMenuIndex: 0,
  menuItems: // ...
  actions: {
    selectMenuItem(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
});

因为使用_view.contentIndex有点像黑客，所以您可以只传递实际的菜单项，然后比较对象引用而不是索引来确定活动项：

菜单项组件：

Ember.Component.extend({

    // passed in
    activeItem: null,
    item: null,
    selectMenuItemAction: '',

    // local
    tagName: 'li',
    classNameBindings: ['activeClass'],

    activeClass: function() {
        var item = this.get('item');
        var activeItem = this.get('activeItem');

        // if the current item is the active item, return the active class
        if(item === activeItem) {
            return 'active-class';
        }

        // otherwise return no class
        return '';
    }.property('activeItem')

    actions: {
        selectMenuItem: function() {
            this.sendAction('selectMenuItemAction', this.get('item'));
        }
    }
})

然后像这样使用它：

{{#each menuItem in sideMenuItems}}
    {{#menu-item index=_view.contentIndex activeIndex=selectedMenuIndex selectMenuItemAction="selectMenuItem"}}
        {{menuItem.text}}
    {{/menu-item}}
{{/each}}

{{#each menuItem in sideMenuItems}}
    {{#menu-item item=menuItem activeItem=selectedMenuItem selectMenuItemAction="selectMenuItem"}}
        {{menuItem.text}}
    {{/menu-item}}
{{/each}}

控制器：

Ember.ObjectController.extend({
  selectedMenuIndex: 0,
  isActive: function() {
    return (this.get('selectedMenuIndex') == ? ? ? );
  }.property('???'),

  actions: {
    selectMenuItem: function(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
})

Ember.ObjectController.extend({

  sideMenuItems: // ... your array of items, each containing an isActive flag

  actions: {
    selectMenuItem: function(itemIndex) {
      var items = this.get('sideMenuItems');
      items.forEach(function(item, idx) {         // go through the items,
          if(idx === itemIndex) {                 // find the clicked item and set it as active
              Ember.set(item, 'isActive', true);
          } else {                                // reset all other items
              Ember.set(item, 'isActive', false);
          }
      });
    }
  }
})   

Ember.ObjectController.extend({

  sideMenuItems: // ... your array of items, each containing an isActive flag
  activeMenuItem: null,

  actions: {
    selectMenuItem: function(itemIndex) {
      var items = this.get('sideMenuItems');
      var currActive = this.get('activeMenuItem');
      var nextActive = items.objectAt(itemIndex);

      // if there is a currently active item, deactivate it
      if(currActive) {
        Ember.set(currActive, 'isActive', false);
      }

      // if the user clicked on the currently active item, we just reset the selected item
      // otherwise we update the isActive flag for the clicked item
      if(currActive === nextActive) {
          nextActive = null;
      } else {
         Ember.set(nextActive, 'isActive', true);
      }

      // set the clicked item as the currently active menu item
      this.set('activeMenuItem', nextActive);
  }
})  

Ember.ObjectController.extend({
  selectedMenuIndex: 0,

  actions: {
    selectMenuItem: function(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
})

Ember.ObjectController.extend({
  selectedMenuItem: null,

  actions: {
    selectMenuItem: function(item) {
      this.set('selectedMenuItem', item);
    }
  }
})

Ember.Controller.extend({
  selectedMenuIndex: 0,
  menuItems: // ...
  actions: {
    selectMenuItem(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
});

在Ember>1.13中，有一种更简单的方法可以实现这一点 Ember>1.13支持内联帮助程序，因此您可以按照自己的意愿实现这一点。Ember CLI 1.13也随附，因此我们也可以使用ES6，这允许进一步简化：

控制器：

Ember.ObjectController.extend({
  selectedMenuIndex: 0,
  isActive: function() {
    return (this.get('selectedMenuIndex') == ? ? ? );
  }.property('???'),

  actions: {
    selectMenuItem: function(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
})

Ember.ObjectController.extend({

  sideMenuItems: // ... your array of items, each containing an isActive flag

  actions: {
    selectMenuItem: function(itemIndex) {
      var items = this.get('sideMenuItems');
      items.forEach(function(item, idx) {         // go through the items,
          if(idx === itemIndex) {                 // find the clicked item and set it as active
              Ember.set(item, 'isActive', true);
          } else {                                // reset all other items
              Ember.set(item, 'isActive', false);
          }
      });
    }
  }
})   

Ember.ObjectController.extend({

  sideMenuItems: // ... your array of items, each containing an isActive flag
  activeMenuItem: null,

  actions: {
    selectMenuItem: function(itemIndex) {
      var items = this.get('sideMenuItems');
      var currActive = this.get('activeMenuItem');
      var nextActive = items.objectAt(itemIndex);

      // if there is a currently active item, deactivate it
      if(currActive) {
        Ember.set(currActive, 'isActive', false);
      }

      // if the user clicked on the currently active item, we just reset the selected item
      // otherwise we update the isActive flag for the clicked item
      if(currActive === nextActive) {
          nextActive = null;
      } else {
         Ember.set(nextActive, 'isActive', true);
      }

      // set the clicked item as the currently active menu item
      this.set('activeMenuItem', nextActive);
  }
})  

Ember.ObjectController.extend({
  selectedMenuIndex: 0,

  actions: {
    selectMenuItem: function(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
})

Ember.ObjectController.extend({
  selectedMenuItem: null,

  actions: {
    selectMenuItem: function(item) {
      this.set('selectedMenuItem', item);
    }
  }
})

Ember.Controller.extend({
  selectedMenuIndex: 0,
  menuItems: // ...
  actions: {
    selectMenuItem(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
});

模板：

{{#each menuItems as |item index|}}
  <li class="{{active-class index selectedMenuIndex}}" {{action "selectMenuItem" index}}>
  {{item.text}}
  </li>
{{/each}}

当用户选择一个菜单项时，我想将该项添加到活动类中

由于您使用的是Ember 1.5，我将首先向您展示一些在旧版本中实现这一点的方法。 最简单的方法是向项本身添加一个标志isActive，并将其用作css类的条件。您可以在selectMenuItem操作中将已单击项目的标志设置为true。如果您的逻辑一次只允许一个项目处于活动状态，则还必须将任何当前活动项目的isActive标志重置为false

一种更有效的方法是将当前活动项存储为单独的变量，这样就不需要迭代sideMenuItems数组两次：

控制器：

Ember.ObjectController.extend({
  selectedMenuIndex: 0,
  isActive: function() {
    return (this.get('selectedMenuIndex') == ? ? ? );
  }.property('???'),

  actions: {
    selectMenuItem: function(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
})

Ember.ObjectController.extend({

  sideMenuItems: // ... your array of items, each containing an isActive flag

  actions: {
    selectMenuItem: function(itemIndex) {
      var items = this.get('sideMenuItems');
      items.forEach(function(item, idx) {         // go through the items,
          if(idx === itemIndex) {                 // find the clicked item and set it as active
              Ember.set(item, 'isActive', true);
          } else {                                // reset all other items
              Ember.set(item, 'isActive', false);
          }
      });
    }
  }
})   

Ember.ObjectController.extend({

  sideMenuItems: // ... your array of items, each containing an isActive flag
  activeMenuItem: null,

  actions: {
    selectMenuItem: function(itemIndex) {
      var items = this.get('sideMenuItems');
      var currActive = this.get('activeMenuItem');
      var nextActive = items.objectAt(itemIndex);

      // if there is a currently active item, deactivate it
      if(currActive) {
        Ember.set(currActive, 'isActive', false);
      }

      // if the user clicked on the currently active item, we just reset the selected item
      // otherwise we update the isActive flag for the clicked item
      if(currActive === nextActive) {
          nextActive = null;
      } else {
         Ember.set(nextActive, 'isActive', true);
      }

      // set the clicked item as the currently active menu item
      this.set('activeMenuItem', nextActive);
  }
})  

Ember.ObjectController.extend({
  selectedMenuIndex: 0,

  actions: {
    selectMenuItem: function(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
})

Ember.ObjectController.extend({
  selectedMenuItem: null,

  actions: {
    selectMenuItem: function(item) {
      this.set('selectedMenuItem', item);
    }
  }
})

Ember.Controller.extend({
  selectedMenuIndex: 0,
  menuItems: // ...
  actions: {
    selectMenuItem(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
});

另一种方法是创建自定义组件菜单项，该菜单项根据活动索引呈现具有/不具有类的li项

Ember.Component.extend({

    // passed in
    activeIndex: -1,
    index: -1,
    selectMenuItemAction: '',

    // local
    tagName: 'li',
    classNameBindings: ['activeClass'],

    activeClass: function() {
        var idx = this.get('index');
        var activeIdx = this.get('activeIndex');

        // if the current item is the active index, return the active class
        if(idx === activeIdx) {
            return 'active-class';
        }

        // otherwise return no class
        return '';
    }.property('activeIndex')

    actions: {
        selectMenuItem: function() {
            this.sendAction('selectMenuItemAction', this.get('index'));
        }
    }
})

然后像这样使用它：

{{#each menuItem in sideMenuItems}}
    {{#menu-item index=_view.contentIndex activeIndex=selectedMenuIndex selectMenuItemAction="selectMenuItem"}}
        {{menuItem.text}}
    {{/menu-item}}
{{/each}}

{{#each menuItem in sideMenuItems}}
    {{#menu-item item=menuItem activeItem=selectedMenuItem selectMenuItemAction="selectMenuItem"}}
        {{menuItem.text}}
    {{/menu-item}}
{{/each}}

控制器：

Ember.ObjectController.extend({
  selectedMenuIndex: 0,
  isActive: function() {
    return (this.get('selectedMenuIndex') == ? ? ? );
  }.property('???'),

  actions: {
    selectMenuItem: function(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
})

Ember.ObjectController.extend({

  sideMenuItems: // ... your array of items, each containing an isActive flag

  actions: {
    selectMenuItem: function(itemIndex) {
      var items = this.get('sideMenuItems');
      items.forEach(function(item, idx) {         // go through the items,
          if(idx === itemIndex) {                 // find the clicked item and set it as active
              Ember.set(item, 'isActive', true);
          } else {                                // reset all other items
              Ember.set(item, 'isActive', false);
          }
      });
    }
  }
})   

Ember.ObjectController.extend({

  sideMenuItems: // ... your array of items, each containing an isActive flag
  activeMenuItem: null,

  actions: {
    selectMenuItem: function(itemIndex) {
      var items = this.get('sideMenuItems');
      var currActive = this.get('activeMenuItem');
      var nextActive = items.objectAt(itemIndex);

      // if there is a currently active item, deactivate it
      if(currActive) {
        Ember.set(currActive, 'isActive', false);
      }

      // if the user clicked on the currently active item, we just reset the selected item
      // otherwise we update the isActive flag for the clicked item
      if(currActive === nextActive) {
          nextActive = null;
      } else {
         Ember.set(nextActive, 'isActive', true);
      }

      // set the clicked item as the currently active menu item
      this.set('activeMenuItem', nextActive);
  }
})  

Ember.ObjectController.extend({
  selectedMenuIndex: 0,

  actions: {
    selectMenuItem: function(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
})

Ember.ObjectController.extend({
  selectedMenuItem: null,

  actions: {
    selectMenuItem: function(item) {
      this.set('selectedMenuItem', item);
    }
  }
})

Ember.Controller.extend({
  selectedMenuIndex: 0,
  menuItems: // ...
  actions: {
    selectMenuItem(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
});

因为使用_view.contentIndex有点像黑客，所以您可以只传递实际的菜单项，然后比较对象引用而不是索引来确定活动项：

菜单项组件：

Ember.Component.extend({

    // passed in
    activeItem: null,
    item: null,
    selectMenuItemAction: '',

    // local
    tagName: 'li',
    classNameBindings: ['activeClass'],

    activeClass: function() {
        var item = this.get('item');
        var activeItem = this.get('activeItem');

        // if the current item is the active item, return the active class
        if(item === activeItem) {
            return 'active-class';
        }

        // otherwise return no class
        return '';
    }.property('activeItem')

    actions: {
        selectMenuItem: function() {
            this.sendAction('selectMenuItemAction', this.get('item'));
        }
    }
})

然后像这样使用它：

{{#each menuItem in sideMenuItems}}
    {{#menu-item index=_view.contentIndex activeIndex=selectedMenuIndex selectMenuItemAction="selectMenuItem"}}
        {{menuItem.text}}
    {{/menu-item}}
{{/each}}

{{#each menuItem in sideMenuItems}}
    {{#menu-item item=menuItem activeItem=selectedMenuItem selectMenuItemAction="selectMenuItem"}}
        {{menuItem.text}}
    {{/menu-item}}
{{/each}}

控制器：

Ember.ObjectController.extend({
  selectedMenuIndex: 0,
  isActive: function() {
    return (this.get('selectedMenuIndex') == ? ? ? );
  }.property('???'),

  actions: {
    selectMenuItem: function(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
})

Ember.ObjectController.extend({

  sideMenuItems: // ... your array of items, each containing an isActive flag

  actions: {
    selectMenuItem: function(itemIndex) {
      var items = this.get('sideMenuItems');
      items.forEach(function(item, idx) {         // go through the items,
          if(idx === itemIndex) {                 // find the clicked item and set it as active
              Ember.set(item, 'isActive', true);
          } else {                                // reset all other items
              Ember.set(item, 'isActive', false);
          }
      });
    }
  }
})   

Ember.ObjectController.extend({

  sideMenuItems: // ... your array of items, each containing an isActive flag
  activeMenuItem: null,

  actions: {
    selectMenuItem: function(itemIndex) {
      var items = this.get('sideMenuItems');
      var currActive = this.get('activeMenuItem');
      var nextActive = items.objectAt(itemIndex);

      // if there is a currently active item, deactivate it
      if(currActive) {
        Ember.set(currActive, 'isActive', false);
      }

      // if the user clicked on the currently active item, we just reset the selected item
      // otherwise we update the isActive flag for the clicked item
      if(currActive === nextActive) {
          nextActive = null;
      } else {
         Ember.set(nextActive, 'isActive', true);
      }

      // set the clicked item as the currently active menu item
      this.set('activeMenuItem', nextActive);
  }
})  

Ember.ObjectController.extend({
  selectedMenuIndex: 0,

  actions: {
    selectMenuItem: function(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
})

Ember.ObjectController.extend({
  selectedMenuItem: null,

  actions: {
    selectMenuItem: function(item) {
      this.set('selectedMenuItem', item);
    }
  }
})

Ember.Controller.extend({
  selectedMenuIndex: 0,
  menuItems: // ...
  actions: {
    selectMenuItem(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
});

在Ember>1.13中，有一种更简单的方法可以实现这一点 Ember>1.13支持内联帮助程序，因此您可以按照自己的意愿实现这一点。Ember CLI 1.13也随附，因此我们也可以使用ES6，这允许进一步简化：

控制器：

Ember.ObjectController.extend({
  selectedMenuIndex: 0,
  isActive: function() {
    return (this.get('selectedMenuIndex') == ? ? ? );
  }.property('???'),

  actions: {
    selectMenuItem: function(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
})

Ember.ObjectController.extend({

  sideMenuItems: // ... your array of items, each containing an isActive flag

  actions: {
    selectMenuItem: function(itemIndex) {
      var items = this.get('sideMenuItems');
      items.forEach(function(item, idx) {         // go through the items,
          if(idx === itemIndex) {                 // find the clicked item and set it as active
              Ember.set(item, 'isActive', true);
          } else {                                // reset all other items
              Ember.set(item, 'isActive', false);
          }
      });
    }
  }
})   

Ember.ObjectController.extend({

  sideMenuItems: // ... your array of items, each containing an isActive flag
  activeMenuItem: null,

  actions: {
    selectMenuItem: function(itemIndex) {
      var items = this.get('sideMenuItems');
      var currActive = this.get('activeMenuItem');
      var nextActive = items.objectAt(itemIndex);

      // if there is a currently active item, deactivate it
      if(currActive) {
        Ember.set(currActive, 'isActive', false);
      }

      // if the user clicked on the currently active item, we just reset the selected item
      // otherwise we update the isActive flag for the clicked item
      if(currActive === nextActive) {
          nextActive = null;
      } else {
         Ember.set(nextActive, 'isActive', true);
      }

      // set the clicked item as the currently active menu item
      this.set('activeMenuItem', nextActive);
  }
})  

Ember.ObjectController.extend({
  selectedMenuIndex: 0,

  actions: {
    selectMenuItem: function(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
})

Ember.ObjectController.extend({
  selectedMenuItem: null,

  actions: {
    selectMenuItem: function(item) {
      this.set('selectedMenuItem', item);
    }
  }
})

Ember.Controller.extend({
  selectedMenuIndex: 0,
  menuItems: // ...
  actions: {
    selectMenuItem(itemIndex) {
      this.set('selectedMenuIndex', itemIndex);
    }
  }
});

模板：

{{#each menuItems as |item index|}}
  <li class="{{active-class index selectedMenuIndex}}" {{action "selectMenuItem" index}}>
  {{item.text}}
  </li>
{{/each}}

---

您使用的是哪个版本的灰烬？您使用的是哪个版本的灰烬？谢谢您的回答。事实上，你的方法会奏效的。但是Ember.js有没有更好的方法来处理这种情况呢？类似于Angular.js ng class={isActive:$index==selectedIndex}。我知道Ember在html中不支持内联条件，这就是Ember在控制器中使用属性函数的原因。那么我可以用这个条件写一个属性函数吗？检查我的编辑。你可以制作一个组件来实现这一点。如果你能更新到最新的余烬，它包含许多改进，这将使你的生活更轻松。我在最新的余烬中附加了一个实现这一点的方法。至于您关于使用属性的问题，它与我的前几个示例中的几乎相同。使用第一个示例，如果移动items.forEach。。。控制器内部的代码，从selectMenuItem操作到一个单独的计算属性，当selectedMenuIndex更改时，该属性将重新计算，即属性“selectedMenuIndex”，您将实现您的要求，尽管该行为与我的示例没有什么不同。谢谢您的回答。事实上，你的方法会奏效的。但是Ember.js有没有更好的方法来处理这种情况呢？类似于Angular.js ng class={isActive:$index==selectedIndex}。我知道Ember在html中不支持内联条件，这就是Ember在控制器中使用属性函数的原因。那么我可以用这个条件写一个属性函数吗？检查我的编辑。你可以制作一个组件来实现这一点。如果你能更新到最新的余烬，它包含许多改进，这将使你的生活更轻松。我附加了一个方法来实现这一点，在最新的余烬 关于使用属性的问题，它与我的前两个示例中的问题基本相同。使用第一个示例，如果移动items.forEach。。。控制器内部的代码，从selectMenuItem操作到单独的计算属性，该属性在selectedMenuIndex更改时重新计算，即属性“selectedMenuIndex”，您将实现您所要求的，尽管该行为与我的示例没有什么不同。