动态在ContainerView中添加组件时遇到问题

debugcn 发表于 Dev

迪文德拉·史瑞莎（Deewendra Shrestha）

我在应用程序级别有一个容器视图，我想通过一些操作向该容器视图添加一些组件。我这样做的方式是：

1）我将一些对象推送到应用程序控制器

2）ContainerView在应用程序控制器的上下文内，因此我观察了保存步骤1中提到的对象的数组的长度

3）然后创建组件并将它们附加到容器视图

我注意到的一件奇怪的事情是，最初在容器视图中定义的观察者没有被触发，但是后来我在控制器上记录了初始化钩子，然后观察者开始为我工作。这告诉我也许我做的不对。这是我的容器视图：

App.MyContainerView = Ember.ContainerView.extend({
    initialize: function(){
        //IF YOU WERE TO COMMENT THIS CONSOLE.LOG THEN THE OBSERVER NEVER GETS HIT WHEN YOU CLICK ON ADD BUTTON. MAYBE CONTROLLER IS NOT SET UP AND IT NEEDS SOME TIME???
        console.log(this.get('controller').toString());
    }.on('init'),

    appendMyComponent: function(){
        console.log("inside the observer");
        this.get('controller.myComponents').forEach(function(comp){
        console.log(this.toString());
        this.pushOject(App.MyTestComponent.create({}));
        }, this);
    }.observes('controller.myComponents.length')
});

我是否必须使用命名的插座，然后在插座内渲染容器视图？不知道我在这里做错了什么。

这是一个jsbin：http ://emberjs.jsbin.com/xamoxese/2/

非常感谢您的反馈。谢谢好人的stackoverflow。

使用：

灰烬：1.5.0把手：1.3.0 jQuery：1.10.2

好吧，还有更多更新，尽管@bmeyers提供的解决方案最初在jsbin中有效，但对我来说却不起作用。因此，在我的真实应用中，mu application.hbs看起来像这样：

{{outlet navbar}}
{{outlet}}
{{outlet modal}}
{{view App.MyContainerView}}

但后来我将其重新排序为：

{{view App.MyContainerView}} 
{{outlet navbar}}
{{outlet}}
{{outlet modal}}

然后解决方案起作用了。现在，只有当我可以摆脱console.log的问题时：）这是我在@bmeyers解决方案http://emberjs.jsbin.com/xamoxese/10/上添加的已更新的jsbin。

梅耶尔

我已为您修复此问题，并在此处显示了示例：http : //emberjs.jsbin.com/xamoxese/3/edit?html,css,js,output

我没有解决您要一遍又一遍地添加相同组件并且从不清除childView数组的问题，但这也许是您的意图。

基本上，您没有推送到容器视图，而是需要推送到childViews属性。

希望这对您有所帮助！

已修复更新

http://emberjs.jsbin.com/xamoxese/6/edit

好的，看起来您只是需要在foreach函数之外的引用，并且出于某种原因，允许以记录方式使用它

更新2 ：：将containerView代码更改为...。

App.MyContainerView = Ember.ContainerView.extend({
  init: function() {
    this._super();
    this.appendMyComponent();
  },

  appendMyComponent: function(){
      this.get('controller.myComponents').forEach(function(comp){
        this.pushObject(App.MyTestComponent.create({}));
    }, this);
  }.observes('controller.myComponents.length')
});

这比创建一个永远不会使用的空视图要干净一些。挑剔的我知道，但它困扰着我。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。