1

问题如下：在我们的应用程序中，我们有几个按钮、导航图标等，当它们被点击时我们希望它们被“选中”。我们可以同时标记多个元素。

我想要这样做的第二个原因是，当我阅读 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 属性以评估是否选择了此元素。

有没有一个很好的解决方案可以在没有视图的情况下执行此操作，还是我被迫使用视图？还是我认为模板/视图/控制器的设计部分和责任是错误的？

任何回应表示赞赏！

4

1 回答 1

0

在当前文档中：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}} 中对“控制器”的引用，因为我假设它是一个 ember 控制器，那么它就是当前上下文，所以基本上 isSelected 相当于 controller.isSelected

于 2013-01-16T13:15:45.380 回答