Ember.js:使用 {{render}} 助手时访问 "parent" Controller 中的属性

Question

我有以下设置:

| // IndexController contains array of search result objects
| IndexController  (ArrayController) 
|     //Contains a search result object with row data (array) and search metadata
|---> ResultController (ObjectController) 
|          // Contains just the row data which is rendered into a sortable table 
|--------> TableController (ArrayController)

IndexController当用户启动搜索时，从服务器检索对象列表。返回的每个对象都有一些关于搜索的元数据以及所有行数据。

每个对象都使用 {{#each}} 渲染索引模板中的助手:

{{#each itemController="result"}}
    {{view App.ResultView}}
{{/each}}

ResultView 呈现元数据，然后使用 {{render}} 呈现实际表。像这样的 helper :

<h2>{{pieceofMetaData}}</h2>
{{render "table" rows}}  

由于我指定了模型(在本例中为行数据)， {{render}} helper 为每个结果对象创建一个 TableController 实例。例如，如果 IndexController 模型中有 3 个结果对象，则会创建 3 个 TableController。 TableController 是一个 ArrayController 来利用 ArrayController 可以为我做的排序。在表格模板中，我呈现表格本身:

  <table>
      <thead>
          <tr>
              <th>First Name</th>
              <th>Last Name</th>
          </tr>
      </thead>
      <tbody>   
          {{#each}}  <!-- Each row of data is rendered here -->
              <tr>
                  <td>{{firstName}}</td>
                  <td>{{lastName}}</td>
              </tr>
          {{/each}}
      </tbody>
   </table>

这很有效，但我现在遇到了一个问题。我需要能够访问 ResultController 中的属性从内部 TableController .基本上是 ResultController包含有关哪些列可排序的信息。我不知道如何访问父级 ResultController来自 child TableController .

我尝试使用 needs: ['result'] 'TableController' 内部，但这只是实例化 ResultController 的一个新实例而不是让我访问实际的 parent 。

我在下面创建了一个工作 jsbin 来设置我在此处描述的代码。

http://emberjs.jsbin.com/paceqaki/7/edit

任何帮助或建议将不胜感激!

最好的事物，

萨鲁斯

Answer 1

在你的情况下，我会使用 PersonTableComponent ，查看 example .使用渲染助手主要用于特定的路由上下文。我认为，您正在尝试利用 Ember.SortableMixin 提供的“sortProperties”、“sortAscending”功能的优势，不幸的是，此 mixin 似乎仅适用于 ArrayProxy 实例，因此您需要在组件中实现排序功能。

<script type="text/x-handlebars" data-template-name="components/person-table">  
    <h3>{{header}} )</h3>
     <table>
      <thead>
          <tr>
             <th {{action 'toggleSortFirstName' }}>First Name</th>
             <th {{action 'toggleSortLastName'}}>Last Name</th>
          </tr>
      </thead>
      <tbody>   
          {{#each sortedPeople}}
              <tr>
                  <td>{{firstName}}</td>
                  <td>{{lastName}}</td>
              </tr>
          {{/each}}
      </tbody>
   </table>
</script>



<script type="text/x-handlebars" data-template-name="index">  
    {{#each controller}}
        {{person-table header=header people=rows}}
    {{/each}}
</script>

App.PersonTableComponent = Ember.Component.extend({
  sortProperty: 'lastName',
  sortAscending: true,


  sortedPeople: Em.computed(function(){

    // define your sorting functionality
    return this.get('people').sort( function(item) {
      return -1;
    });

  }).property('people.@each', 'sortProperty', 'sortAscending'),

  actions: {
    toggleSortFirstName: function() {


      var sortValue = !this.get('firstNameSortValue');

      // save current sort state
      this.set('fistNameSortValue', sortValue);
      this.setProperties({sortProperty: 'firstName',
                          sortAscending: sortValue});

    },
    toggleSortLastName: function() {

      var sortValue = !this.get('lastNameSortValue');

      // save current sort state
      this.set('lastNameSortValue', sortValue);
      this.setProperties({sortProperty: 'lastName',
                          sortAscending: sortValue});
    }
  }
});

查看 EmberJS 指南部分 Component和 Rendering with helper .