Question

In the controller of a view within my Ember.js application, I have got an array of Travel types and another value with the current user’s travel preferences.

Within the view, I need to add a CSS class to an element based on if the current travel type is a user’s preferred travel preference.

This is as far as I have got, I just cannot seem to think how to connect the two up? Any help would be appreciated.

Values are hard-coded for benefit of this post, but the travelType and travelPreferences result from an AJAX call (and using Ember Objects)

Controller:

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' }
    ]
});

View

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

So on the <li>, I need to put class="preferred" if the ID in the travelPreferences array matches up with the ID of the travelType.

Answer 1

First, I would change the regular javascript objects into Ember objects, so I can use the binging functionality:

    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
    })],

Next, I would observe for changes in the current user preferences and update the travel types’ preferred property:

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'),

And finally, I would bind to the preferred flag of each travel type in the travel types’ list.

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

Here is a working fiddle, to wrap it all up: http://jsfiddle.net/B4d6K/4/
Read more about the framework and play with the binding and view mechanisms and you will see that you can do anything with it. This is probably not the cleanest solution, perhaps you will come up with something better after reading a bit.