javascript - 使用{{render}}时如何访问非单例的父 Controller ？

Question

我想从 {{render}} 访问的 Controller 访问 parent Controller 。我试过 needs 但它不起作用。它给了我一个单例 Controller ，但我想要显式 controller 及其 content。

如何解决这个问题来渲染矩阵？

我创建了一个 little demonstration (JS Bin) ，它的代码与下面相同。

JS:

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {
      items: [ App.Item.create({ id: 'i1' }), App.Item.create({ id: 'i2' }) ],
      places: [ App.Place.create({ id: 'p1' }), App.Place.create({ id: 'p2' }) ] 
    };
  }
});

App.Place = Em.Object.extend({
  stores: function() {
    if (this.get('id') == 'p1') {
      return [App.Store.create({ id: 's1', itemId: 'i1', quantity: 4 }),
              App.Store.create({ id: 's2', itemId: 'i2', quantity: 6 }),
              App.Store.create({ id: 's3', itemId: 'i2', quantity: 12, comment: 'broken' })];
    }else {
      return [App.Store.create({ id: 's4', itemId: 'i2', quantity: 12 })];  
    }
  }.property('id')
});

App.Item = Em.Object.extend({
});

App.Store = Em.Object.extend();

App.PlaceController = Em.ObjectController.extend({
  needs: ['index']
});

App.ItemOnPlaceController = Em.Controller.extend({
  needs: 'place',
  stores: function() {
    var self = this;
    // Problem: controllers.place.content == null!
    alert(this.get('controllers.place.content'));
    //return this.get('controllers.place.content.stores').find(function(store) {
    //  return self.get('content.id') == store.get('itemId');
    //});
  }.property('controllers.place.content.stores', 'content.id')
});

还有 Handlebars 模板:

<script type="text/x-handlebars">
  <h2>Welcome to Ember.js</h2>

  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  <h1>Demo</h1>
  <table>
    <thead>
      <tr>
        <th></th>
        {{#each item in items}}
          <th>Item {{item.id}}</th>
        {{/each}}
      </tr
    </thead>
    <tbody>
      {{#each place in places}}
        {{render "place" place}}
      {{/each}}
    </tbody>
  </table>
</script>

<script type="text/x-handlebars" data-template-name="place">
  <tr>
    <th>Place {{id}}</th>
    {{#each item in controllers.index.content.items}}
      <td>
        {{render itemOnPlace item}}
      </td>
    {{/each}}
  </tr>
</script>

<script type="text/x-handlebars" data-template-name="itemOnPlace">
  {{content.id}}
  <ul>
    {{#each stores}}
      <li>{{quantity}} - {{comment}}</li>
    {{/each}}
  </ul>
</script>

Answer 1

在 itemController 中，您应该使用它的 target 属性，这将是您要访问的父 Controller 。

编辑好了你的jsbin看看:http://emberjs.jsbin.com/ArUjeVi/7/edit

希望对您有所帮助。