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

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>

并且 each 中带有 itemController 的商店模板向苹果列表中的每个元素添加控制器：

<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 控制器连接到视图

How to connect an Ember.js Controller to a View

javascript

ember.js