模板中选择的项，是否有任何解决方案可以识别上下文的bindAttr

Question

问题如下:在我们的应用程序中，我们有几个按钮，导航图标等，我们希望被"选中"时，他们已被点击。可以同时标记多个元素。

我想这样做的第二个原因是，当我在emberjs.com上阅读新的指南时，我觉得模板应该比以前使用得更多，模板应该负责呈现DOM，而视图应该用于处理复杂的事件(如果有的话)或创建通用/共享组件以在应用程序中重用。

当前视图正在处理:

app.NavView = Ember.CollectionView.extend({
    ...
    itemViewClass: Ember.View.extend({
        ...
        classNameBindings: ['isSelected:selected']
        isSelected: function () {
            return this.get('controller.selected') === this.get('content');
        }.property('controller.selected')
    })
});

但这就是视图所做的一切，我想把整个视图放下，只使用这个

的模板

我已经尝试了模板方法，并放弃了整个视图的概念。

<div id="main-menu">
    {{#each content}}
    <div {{bindAttr class="controller.isSelected:selected"}}>
        {{{iconsvg}}}
        {{name}}
    </div>
    {{/each}}
</div>

但是我这里的问题当然是bindAttr不知道它所在的上下文，并且不能将这个'发送'给控制器上的isSelected属性来评估它是否是这个元素被选中了。

在没有视图的情况下是否有一个好的解决方案，或者我是否被迫使用视图?或者我认为模板/视图/控制器的设计部分和责任是错误的?

欢迎回复!

Answer 1

在当前的文档中:http://emberjs.com/guides/templates/displaying-a-list-of-items/中提到了如何使用{{each}} helper，它不会覆盖当前上下文。

在你的例子中，这就像:

<div id="main-menu">
  {{#each item in controller}}
  <div {{bindAttr class="isSelected:selected"}}>
    {{{item.iconsvg}}}
    {{item.name}}
  </div>
  {{/each}}
</div>

注意我在{{bindAttr}}中删除了对'controller'的引用因为我假设它是一个ember控制器，那么它就是当前上下文，所以基本上isSelected等价于controller。isSelected