Ember.js：访问“中的属性”；“家长”；使用{{render}}辅助对象时的控制器

我有以下设置：

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

帮助程序呈现实际表，如下所示：

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

这很有效，但我现在遇到了一个问题。我需要能够从

TableController

内部访问

ResultController

中的属性。基本上，

ResultController

包含有关哪些列可排序的信息。我不知道如何从子

TableController

访问父

ResultController

我尝试在“TableController”中使用

needs:['result']

，但这只是实例化了

ResultController

的一个新实例，而不是让我访问实际的父对象

我在下面创建了一个工作jsbin，它设置了我在这里描述的代码

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

最好的

---

Sarus

在你的情况下，我会使用，检查。使用渲染辅助对象主要用于特定的管线上下文。我认为，您正在尝试利用Ember.SortableMixin提供的“sortProperties”、“SortScending”功能，不幸的是，此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});
    }
  }
});

{{header}}）
名字
姓
{{{#每个被分类的人}
{{firstName}}
{{lastName}}
{{/每个}}
{{{#每个控制器}}
{{person table header=header people=rows}
{{/每个}}
App.PersonTableComponent=Ember.Component.extend({
sortProperty:“lastName”，
排序：是的，
sortedPeople:Em.computed（函数（）{
//定义排序功能
返回此.get（'people'）.sort（函数（项）{
返回-1；
});
}).property（'people.@each'，'sortProperty'，'sortAscending'），
行动：{
toggleSortFirstName:函数（）{
var sortValue=！this.get（'firstNameSortValue'）；
//保存当前排序状态
此.set（'fistNameSortValue'，sortValue'）；
this.setProperties（{sortProperty:'firstName'，
排序设置：sortValue}）；
},
toggleSortLastName:function（）{
var sortValue=！this.get（'lastNameSortValue'）；
//保存当前排序状态
this.set（'lastNameSortValue'，sortValue）；
this.setProperties（{sortProperty:'lastName'，
排序设置：sortValue}）；
}
}
});

---

请参阅《EmberJS指南》部分和

谢谢你的回复！我的理解是组件没有控制器。在本例中，我对person表使用了ArrayController，这样我就可以利用您使用

sortProperties

和

SortScending

进行的排序。因为我需要控制器，所以我使用了

{[render}}

在组件上。是否可以在组件中使用排序功能？啊，我明白了，问题是父控制器是ObjectController而不是ArrayController。ObjectController在搜索结果上除了行之外还有元数据。这就是为什么我使用

{render}

将行传递给ArrayController以利用表上的排序，但需要ObjectController在表上显示元数据。如果我使用组件路径，则无法使用ArrayController。也许我必须这样做，并使用ArrayProxy或其他方法实现排序？如果组件触发e“分类行动”。我将创建在组件中管理的组件操作，以对新的排序数组进行排序。我将更新响应，以显示它可能是什么。这似乎很好，尽管只是为了澄清一下，按照您的排序方式，每次更新排序顺序或从数组中添加/删除人员时，都会创建一个新数组，对吗？这里的最佳实践是使用ArrayProxy进行额外操作吗？事实证明，您可以使用新的Ember.computed.sort，并按照您的建议执行组件路径！以下是computed.sort的信息。感谢您的帮助。

<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});
    }
  }
});