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.