使用{{render}}时如何访问非单例的父控制器?

时间:2013-09-20 12:48:27

标签: javascript ember.js

我想从parent访问过的控制器访问{{render}}控制器。我试过了needs但它不起作用。它给了我一个单独的控制器,但我希望明确的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')
});

车把模板:

<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>

1 个答案:

答案 0 :(得分:2)

在itemController中使用它,你应该使用它的target属性,它将是你想要访问的父控制器。

编辑过你jsbin看看:http://emberjs.jsbin.com/ArUjeVi/7/edit

希望它有所帮助。