如何在EmberJS中基于数组和值绑定attr类活动

How to bind-attr class active in EmberJS based on an array and a value?

本文关键字：绑定 attr 活动 数组 EmberJS 于数组      更新时间：2023-09-26

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

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

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

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

请帮。

创建子控制器并添加一个computed属性来指示是否活动:

ul控制器(为了简单起见，这里使用ApplicationController):

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

li控制器:

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属性。参见这个问题

相关文章：