2

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">
    &#123;&#123;render knob&#125;&#125;
</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 接线的东西,其中之一是:

  1. 更原生的 ContainerView(进入 Ember 胆量),或者
  2. 一个更解耦的新渲染助手可能不优雅)

我不确定如何进行。如果有人已经提出了一个优雅的解决方案,或者至少可以给我一些有用的提示,那就太好了。

编辑:所以它看起来像创建和分配一个容器,其中包括视图依赖项可能是一个解决方案。有人想吗?

有用的阅读

https://github.com/emberjs/ember.js/issues/2108

Ember.Container 的用途是什么

http://mcdowall.info/posts/ember-application-initializers/

4

1 回答 1

2

存在的理由Ember.ContainerView是动态添加和删除视图,所以我非常有信心你可以用它做所有你想做的事情。

我在您的示例中注意到的一件事是您正在使用View.create(attrs). containerView.createChildView(viewClassName, attrs)用于创建获取容器、父视图层次结构等的视图非常重要。查看实现的更多细节:

https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js#L2072

于 2013-05-03T13:49:36.230 回答