ContainerView:动态添加视图时的限制

问题描述:

ContainerView.pushObject()不会自动用Container对象动态添加视图。 当视图渲染包含句柄渲染助手的模板时,缺少自动布线的容器会导致渲染失败。ContainerView:动态添加视图时的限制

简单的情况,工程(种)

检视:

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

这些类呈现&像预期的那样,如果你interogate其中,不乏一些灰烬布线(如没有_debugContainerKey & container性质IIRC):

更先进的CASE,打破

如果我们引入了使用渲染佣工车把模板,它打破渲染。动态添加的视图目前缺少一些性质呈现帮手假设

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

代码示例

A有一些注意事项更全面的例子可以在这里看到:

http://jsfiddle.net/AshCoolman/KyJ2U/6/embedded/result/

注:我的测试包括基于控制帮手叫controlWithVars

的问题

定制车把帮手

它看起来像我需要写东西,做Ember接线,在任一:

  1. 更多的本地ContainerView(进入灰烬胆量),或
  2. 更脱钩新的渲染帮手可能是不雅)

我不知道如何着手。如果有人已经提出了一个优雅的解决方案,或者至少可以给我一些有用的提示,那将是非常棒的。

编辑:所以看起来创建并分配一个容器,其中包括意见的依赖可能是一个解决方案。想到任何人?

有益的读物

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

What is the purpose of the Ember.Container

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

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

+0

好,谢谢,我会考虑它 – 2013-05-03 15:31:04

+0

我碰到了同样的问题。试图用createChildView(viewClassName,attrs)添加视图(其中包含linkTo帮助器),空的attr,但我得到了同样的错误。 – 2013-05-20 11:54:25

+0

AshleyCoolman或@EduárdMoldován--你们中的任何一个人都有一个jsfiddle或者说明了这个问题? – 2013-05-20 17:11:03