如何以编程方式在ember js中的其他组件/视图中添加组件或视图

Question

我有一个组件说{{component-1}}被多次调用并创建一个自定义texbox容器并标记它被调用的次数。

现在，只要用户在其中写入内容，就会在其下方显示一个建议框。由于建议框可以在任何地方重复使用，我不希望每个{{component-1}}都有一个单独的建议框，而是我想让另一个名为{{suggestion-box}}的组件插入到组件-1中，即文本框容器。

我不希望{{suggestion-box}}完全在dom里面，因为只有当有人输入它时才需要它。我想在有人输入时将其添加/插入{{component-1}}。我甚至尝试使用视图而不是组件 以下是我尝试过但失败的不同事情
注意：
suggestionBox是组件
textbox-container是{{component-1}}

中的一个元素

1. 在{{component-1}}内this.$().find(".textbox-container").append(this.suggestionBox );内this.suggestionBox = suggestionBoxComponent.create();我已尝试过事件suggestionBoxView.create();
   它给了我一个错误不能插入另一个，我需要使用containerView
2. var tmp = Ember.Handlebars.compile('<div class=".suggestionBox"></div>');
this.$().find('.textbox-container').append(tmp());我收到了名为
   的错误

     

   未捕获的TypeError：无法读取未定义的属性'push'

  
3. 我甚至尝试使用视图而不是组件，即make suggestionBox是一个视图，但是再次我不能在另一个视图中插入一个视图
  
4. 我尝试了很多东西。
     几点：

1. 我不想要如何创建文本框和建议框的替代解决方案
2. 如何将组件或模板中的信息传递给视图？假设我在组件1模板中{{view "suggestion-box"}}，我如何传递值？比如我们在上下文中传递的组件，例如{{component1 sampleVar1=val1 sampleVar2=val2}}
3. 我想知道如何以编程方式添加组件或视图，以及如何查看如何将数据传递给它？

4. 我不想使用容器视图，因为它会导致更复杂的情况，但是如果你的解决方案允许我将值从{{component-1}}传递给容器视图并且将其传递给相应的childView1并且childView2那么该解决方案是可以接受的

   只是更新：
   

5. 我甚至尝试在{{component-1}}

中使用视图容器

6. 我还尝试在{{component-1}}中使用视图块，即 {{#view "view-name"}} ----earlier component elements here----- {{/view}}
   在上述两点中，“view-name”是一个正确插入但未插入组件元素的ContainerView

Answer 1

这可以通过ContainerView和viewName属性来实现。组件或视图可以通过其分配的ContainerView访问viewName或属于模板一部分的任何其他视图。

实施例，

<强> HBS

{{view Ember.ContainerView viewName="my-menu-container"}}

js - 然后从组件或视图

this.get("my-menu-container").pushObject(suggestionBoxViewOrComponent);

http://emberjs.jsbin.com/yoyujeqi/1/edit

P.S。示例的上下文与建议框无关，对不起，因为它是从与动态添加菜单视图相关的其他答案中提取的。