ContainerView.pushObject()
不会自动将动态添加的视图与Container
对象连接起来。
当视图渲染包含把手渲染助手的模板时,缺少自动连接容器会导致渲染失败。
有效的简单案例(种类)
看法:
App.DynamicView = Em.View.extend({
templateName: 'dynamic',
didInsertElement: function() {
var control = this.get('controller');
control.send( 'view_inserted', this.templateName, control._debugContainerKey);
control.send('callDynamicController');
}
});
模板:
<script type="text/x-handlebars" data-template-name="dynamic">
dynamic
</script>
控制器(仅在手动分配时使用):
App.DynamicController = Em.ObjectController.extend({
className: 'App.DynamicWithRenderController',
callDynamicController: function() {
console.log('DynamicController.callDynamicController()');
}
});
索引控制器:
App.IndexController = Em.ObjectController.extend({
view_inserted: function(aview, acontroller) {
console.log('view inserted!', aview, acontroller);
}
})
实例化代码:
var acontainer = App.DynamicController.create({});
var aview = App.DynamicView.create({ controller: acontroller })
acontainerView.pushObject(aview);
这些类按预期呈现 & 行为,但如果您询问它们,则缺少一些 Ember 接线(例如,没有_debugContainerKey
&container
属性 IIRC):
更先进的案例
如果我们引入一个使用渲染助手的车把模板,它会破坏渲染。动态添加的视图当前缺少渲染助手假定的一些属性
<script type="text/x-handlebars" data-template-name="dynamic-with-render">
dynamic w/render:
{{render knob}}
</script>
并使旋钮看起来像这样:
<script type="text/x-handlebars" data-template-name="knob">
{{render knob}}
</script>
(失败的)动态视图实例化代码:
var acontainer = App.DynamicController.create({});
var aview = App.DynamicView.create({
controller: acontroller,
template:'dynamic-with-render' })
acontainerView.pushObject(aview);
代码示例
可以在此处看到带有一些注释的更完整示例:
http://jsfiddle.net/AshCoolman/KyJ2U/6/embedded/result/
注意:我的测试包括一个基于控件助手的自定义车把助手,称为controlWithVars
问题
看起来我需要编写一些可以完成 Ember 接线的东西,其中之一是:
- 更原生的 ContainerView(进入 Ember 胆量),或者
- 一个更解耦的新渲染助手可能不优雅)
我不确定如何进行。如果有人已经提出了一个优雅的解决方案,或者至少可以给我一些有用的提示,那就太好了。
编辑:所以它看起来像创建和分配一个容器,其中包括视图依赖项可能是一个解决方案。有人想吗?
有用的阅读