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')
    })
});

但这就是View基本上所做的一切，我想放弃整个View并只使用一个模板

我尝试过使用模板方法，并放弃了整个View概念。

<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}}帮助器。

在您的情况下，这将是：

<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

模板中的选定项目，是否有任何上下文感知bindAttr的解决方案？

1 个答案: