Javascript 如何将Ember.js控制器连接到视图

我的余烬应用程序具有以下结构：

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

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

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

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

---

接下来，当我尝试在apple列表项模板中使用{{color}}时，它不会打印任何内容。我应该如何解决这个问题？

您需要担心您的命名问题。路由器中的商店路线，需要一个商店路线和一个商店控制器，但我们可以忽略这一点，ember将为您生成一个。和一个商店模板。您应该将您的视图视为模板的可选扩展。Ember始终具有索引路由，因此您需要索引模板：

<script type="text/x-handlebars" data-template-name="index">
  {{#link-to 'shop'}}shop!{{/link-to}}
</script>

然后，您的应用程序看起来像：

App = Ember.Application.create();

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

使用ShopRoute：

以及用作itemController的AppleController：

---

看看这个。

担心命名问题，你是说ApplesListItemView应该是AppleStitItemView？原来的代码就是这样的，我在问题中更正了。谢谢你的回答。然而，问题是我需要为每个apple对象添加一个额外的属性color。在您的示例中，颜色变量被添加到shop上下文中，而不是apple上下文中。顺便说一句，我将TutorialRoute编辑为ShopRoute。很抱歉，这是问题中的一种拼写错误。

App = Ember.Application.create();

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

App.ShopRoute = Ember.Route.extend({
    model: function() {
        return { apples: [ 'grannysmith', 'pinklady' ], oranges: [ 'clementines' ]};
    }
});

App.AppleController = Ember.Controller.extend({
    color: function() {
      if (this.get('model') === 'grannysmith') {
        return 'green';
      }
      return 'purple';                                        
    }.property('model'),
});