如何在使用 {{render}} 时访问非单一实例的父控制器
How to access the parent controller that is not singleton when using {{render}}?
我想从{{render}}
访问的控制器访问parent
控制器。我已经尝试过needs
但它不起作用。它给了我一个单例控制器,但我想要显式controller
及其content
.
如何解决此问题以渲染矩阵?
我创建了一个小演示(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>
在
itemController中,您应该使用它target
属性,该属性将是您要访问的父控制器。
编辑过你的jsbin看看:http://emberjs.jsbin.com/ArUjeVi/7/edit
希望对您有所帮助。
相关文章:
- ES6构造函数返回基类的实例
- KnockoutJS-组件-多个实例
- 为什么无法在TypeScript中导出类实例
- 如何在GoogleWeb工具包(GWT)中从JSNI调用接口(实例化)
- fluxxor向一个flux实例添加一组以上的操作
- 使用jQuery获取Dropzone实例/对象
- "实例范围”;TypeScript类的getter/setter
- 如何在速度模板中获取LiferayPortlet实例id
- 同一项怎么可能在一个实例中未定义,却在另一个实例上定义
- 实例创建(JS)
- 显示模块模式在Knockout中设置模型的新实例
- 如何获取单选按钮的多个实例的选定单选按钮值
- 逃脱了单一角色的介绍人,而不是实际角色
- 当同一浏览器的两个实例浏览时,Javascript页面如何具有唯一的ID
- 在哪里可以找到RXUI Javascript'时间飞逝'实例
- spine.js在启动时填充模型实例
- 不再需要时使用jQuery/kill实例
- 如何在用户输入时实例化数组
- 具有不同回调处理程序的单一实例 Websockets 对象
- 如何在使用 {{render}} 时访问非单一实例的父控制器