我有以下设置:
| // 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 来设置我在此处描述的代码。
任何帮助或建议将不胜感激!
最好的事物,
萨鲁斯
最佳答案
在你的情况下,我会使用 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 .
关于Ember.js:使用 {{render}} 助手时访问 "parent" Controller 中的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23403150/