Question

我的Ember应用程序中有以下结构：

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-list-item模板中使用{{color}}时，它什么都不打印。我该如何解决这个问题？

Answer 1

您需要担心自己的命名。您的路由器中的shop路由需要ShopRoute和ShopController，但我们可以将其保留为ember将为您生成一个路由。和shop模板。您应该将视图视为模板的可选扩展名。 Ember始终具有index路线，因此您需要index模板：

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

itemController中each的商店模板为苹果列表中的每个元素添加控制器：

<script type="text/x-handlebars" data-template-name="shop">
  SHOP! {{color}}
  <ul>
    {{#each apple in model.apples itemController='apple'}}
      <li class="apple">{{apple.model}} {{apple.color}}</li>
    {{/each}}
  </ul>
</script>

然后你的应用程序会看起来像：

App = Ember.Application.create();

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

使用ShopRoute：

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

AppleController用作itemController：

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

请参阅此jsbin。

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

1 个答案: