1

在我的 Ember.js 应用程序的视图控制器中，我有一个旅行类型数组和另一个具有当前用户旅行偏好的值。

在视图中，我需要根据当前旅行类型是否是用户的首选旅行偏好，将 CSS 类添加到元素中。

据我所知，我似乎无法思考如何将两者联系起来？任何帮助，将不胜感激。

为了这篇文章的好处，值是硬编码的，但是 travelType 和 travelPreferences 来自 AJAX 调用（并使用 Ember 对象）

控制器：

App.IndexController = Em.ArrayController.extend({
    user: {
         travelPreferences: [
              "1", 
              "3"
         ]
    }
    travelTypes: [
         { TravelTypeID: '1', TravelTypeDescription: 'Car' }, 
         { TravelTypeID: '2', TravelTypeDescription: 'Train' }, 
         { TravelTypeID: '3', TravelTypeDescription: 'Walking' }, 
         { TravelTypeID: '4', TravelTypeDescription: 'Bike' }
    ]
});

看法

<ul>
    {{#each travelTypes}}
        <li>{{TravelTypeDescription}}</li>
    {{/each}}
</ul>

因此<li>，我需要class="preferred"输入 travelPreferences 数组中的 ID 是否与 travelType 的 ID 匹配。

4

2 回答 2

2

首先，我会将常规的 javascript 对象更改为 Ember 对象，这样我就可以使用 binging 功能：

    user: Ember.Object.create({
        travelPreferences: [
            "1",
            "3"
        ]
    }),
    travelTypes: [
    Ember.Object.create({
        TravelTypeID: '1',
        TravelTypeDescription: 'Car',
        preferred: false
    }),
    Ember.Object.create({
        TravelTypeID: '2',
        TravelTypeDescription: 'Train',
        preferred: false
    }),
    Ember.Object.create({
        TravelTypeID: '3',
        TravelTypeDescription: 'Walking',
        preferred: false
    }),
    Ember.Object.create({
        TravelTypeID: '4',
        TravelTypeDescription: 'Bike',
        preferred: false
    })],

接下来，我将观察当前用户偏好的变化并更新旅行类型的首选属性：

onUserPreferencesChanged: function () {
    var controller = this;
    controller.get('travelTypes').map(function (travelType) {
        travelType.set('preferred', false);
    });
    this.get('user.travelPreferences').map(function (prefId) {
        controller.get('travelTypes').filterProperty('TravelTypeID', prefId).map(function (travelType) {
            travelType.set('preferred', true);
        });
    });
}.observes('user.travelPreferences.@each'),

最后，我将绑定到旅行类型列表中每种旅行类型的首选标志。

    <ul> 
        {{#each travelTypes}} 
        <li {{bindAttr class = "preferred"}}>
            {{TravelTypeDescription}} 
        </li>
        {{/each}}
    </ul>

这是一个工作小提琴，将其全部包装起来：http: //jsfiddle.net/B4d6K/4/ 阅读有关框架的更多信息并使用绑定和视图机制，您将看到您可以用它做任何事情。这可能不是最干净的解决方案，也许你会在阅读后想出更好的东西。

于 2013-02-06T13:03:17.370 回答
0

我最近问了一个类似的问题，关于迭代数组，然后使用一些条件逻辑来改变项目的反映方式。提供给我的答案对我来说非常有效。看：

Handlebars Helper 根据条件逻辑将视图插入模板

我建议使用 ArrayController 来迭代旅行类型。然后指定 itemController（它扩展了 ObjectController）来控制每个元素的显示。ObjectController 可以有一个方法getTravelTypeClass，您可以使用该方法根据某些逻辑为每种旅行类型返回所需的类。

于 2013-02-06T13:02:03.457 回答