Ember.js 通过操作向页面动态添加/删除组件

我正在创建一个FlashCard应用程序，我希望通过路由内的操作将具有属性的组件动态插入视图中。请参见下面的屏幕截图

点击“添加卡片”按钮

在视图中动态创建卡片编辑器组件

我认为实现这一点的一种可能方法是在视图中添加一个条件把手块，并基于属性状态渲染组件；但是，我希望尽可能保持视图的整洁，并且认为如果仅在触发操作时才能将组件动态渲染到视图中会更好

我的解决方案

<div style="margin-left: 200px;">
    {{#if cardEditor}}
        {{app/card-editor}}
    {{/if}}
</div>

我尝试过的

根据答案，但这对我不起作用。我犯了个错误

ember.debug.js:41417 Uncaught Error: Cannot instantiate a component without a renderer. Please ensure that you are creating <(subclass of Ember.Component):ember604> with a proper container/registry.

在观景路线内

import Ember from 'ember';
import CardEditorComponent from '../../components/app/card-editor';

export default Ember.Route.extend({    
    actions: {
        addNewCardEditor() {
            CardEditorComponent.create().appendTo($('body'));
        }
    }
});

在组件JS中

actions: {
    addNewCardPressed() {
        this.sendAction('addNewCardPressed');
    }
}

问题

<div style="margin-left: 200px;">
    {{#if cardEditor}}
        {{app/card-editor}}
    {{/if}}
</div>

因此，我的问题是如何使用

routes/home/index.js

中的操作将组件呈现给视图

查看HTML

{{side-bar
  addNewCardPressed='addNewCardEditor'
}}

索引页路由

import Ember from 'ember';

export default Ember.Route.extend({
    actions: {
        addNewCardEditor(newCard){}
    }
});

我应该在

addNewCardEditor

函数中添加什么来动态生成视图中的组件

---

谢谢您的时间。

在您的EmberCLI应用程序的global.js中：

export function initialize(application) { window.EmberApp = application; // or window.Whatever } 导出函数初始化（应用程序）{ window.EmberApp=application；//或window.which } 在您希望动态创建组件的地方，即使它看起来像一个黑客，也可能有更干净的方法来完成它，而不依赖于CLI变量。 下面的“App”是您在application.js中定义的全局EmberCLI应用程序的命名空间

var component = App.CardEditorComponent.extend({ renderer: window.EmberApp.__container__.lookup('renderer:-dom'), }).create(); Ember.setOwner(component , window.EmberApp); component.append(); var component=App.CardEditorComponent.extend（{ 渲染器：window.EmberApp.\uuuuu容器\uuuuu.lookup（'renderer:-dom'）， }).create（）； setOwner（组件，window.EmberApp）； component.append（）；

---

我觉得你的解决方案很完美<代码>卡片编辑器组件仅在

卡片编辑器

为true时才会实例化/呈现。我认为您所尝试的（以编程方式添加组件）对于您的用例来说是过分的。在ember中，使用

{{{#if}}

助手无疑是解决此问题的正确方法。解决此问题的唯一其他方法是使用路由层次结构。若要以编程方式更改DOM，请尽可能避免在ember中添加组件和类似的内容。

\uuuuuuuuuuuuuuuuuuuuuuuuuuuu.lookup

其双专用API！！ var component = App.CardEditorComponent.extend({ renderer: window.EmberApp.__container__.lookup('renderer:-dom'), }).create(); Ember.setOwner(component , window.EmberApp); component.append();