基于两个独立数据的视图中的属性绑定

Question

在我的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>上，如果travelPreferences数组中的ID与travelType的ID匹配，则需要放置travelType。

Answer 1

首先，我会将常规的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/阅读了更多关于框架的内容，并使用绑定和视图机制，您将看到您可以使用它做任何事情。这可能不是最干净的解决方案，也许你会在阅读后想出更好的解决方案。

Answer 2

最近，我提出了一个类似的问题，即对数组进行迭代，然后使用一些条件逻辑来更改项目的反映方式。我得到的答案对我很有帮助。请参见：

Handlebars Helper to insert view into template based on conditional logic

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