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

Question

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

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

Answer 1

我已经为你解决了这个问题，并在这里展示了一个例子：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')
});    

这感觉比创建一个永远不会使用的空视图更干净。我知道很挑剔，但这让我很烦。

Answer 2

终于想出了如何摆脱console.log的东西。所以我实际上有两个解决方案：

1) 将控制器传递给容器视图

{{view 'myContainer' controller=this}}

2) 为 ContainerView 设置一个空视图

App.MyContainerView = Ember.ContainerView.extend({
    childViews: [Ember.View.create()],

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

实际上，最好的解决方案是 @bmeyers 建议的那样，为容器视图设置 init 函数，如下所示：

init: function() {     
    this._super();     
    /*
     THIS IS THE OBSERVER METHOD THAT WE HAVE IN THE VIEW, THIS CALL DOES NOT EVEN
     NEED TO ADD A CHILD VIEW, BUT STILL NEEDS TO BE CALLED - STRANGE I KNOW BUT WHY
     I AM NOT SURE. ALSO FACED ISSUE DURING TEST FOR ABOVE 2 APPROACHES, THIS ONE WORKED WELL
     */
    this.appendMyComponent();
}

这里是工作的 jsbin：http://jsbin.com/xamoxese/13/