How to connect an Ember.js Controller to a View

I have the following structure in my Ember app:

App.Router.map(function() {
    this.route('shop', { path: '/shop' });
});

App.TutorialRoute = Ember.Route.extend({
    model: function() {
        return $.getJSON( "/fruits"); // this returns a json like this: { apples: [...], oranges: [...]}
    }
});

App.ApplesListItemView = Ember.View.extend({
    templateName: 'apple-list-item',
    tagName: 'li',
    classNames: ['apple']
});

App.AppleListItemController = Ember.ArrayController.extend({
    color: "green",
});

Next, when I try to use {{color}} in the apple-list-item template, it prints nothing. How should I fix this?