Question

我有一个mode数组，并希望根据活动属性设置有效li。

mode: ['list', 'grid', 'table'], // dynamic values
active: 'list',

输出：

<ul>
{{#each mode}}
    <li {{bind-attr class="?:active"}}>
        <a href="#">{{this}}</a>
    </li>
{{/each}}
</ul>

我将在bind-attr部分放置什么，以便如果在active数组中的任何一个上设置mode属性，它将绑定li上的活动类？

请帮忙。

Answer 1

创建子控制器并添加计算属性以指示是否处于活动状态：

ul控制器（为简单起见，在这里使用ApplicationController）：

App.ApplicationController = Ember.ObjectController.extend({
    mode: ['list', 'grid', 'table'],
    active: 'list'
});

李控制器：

App.LiController = Ember.ObjectController.extend({
    needs: ['application'],

    isActive: function() {
        return this.get('controllers.application.active') === this.get('model');
    }.property()
});

模板：

<ul>
    {{#each mode itemController="li"}}
    <li {{bind-attr class="isActive:active"}}>
        <a href="#">{{model}}</a>
    </li>
    {{/each}}
</ul>

JSBin

为什么我需要另一个控制器？

来自ember的文档，它说：

在Ember.js中，控制器允许您使用显示逻辑来装饰模型。通常，您的模型将具有保存到服务器的属性，而控制器将具有您的应用程序不需要保存到服务器的属性。

因此，额外控制器的唯一目的是保留isActive属性。

什么是{{content}}？

content表示控制器的基础对象，在本例中为字符串文字。它不是保留关键字，而是控制器的属性。

我更新了使用model代替content的答案，实际上它们是相同的，您应该始终使用model属性。见this question

如何基于数组和值在EmberJS中绑定-attr类？

1 个答案: