通过操作向页面动态添加/删除组件答案

【问题标题】：Dynamic add/remove a component to the page via action通过操作向页面动态添加/删除组件
【发布时间】：2017-01-17 04:08:11
【问题描述】：

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

点击“添加卡”按钮
在视图中动态创建卡片编辑器组件

我认为实现这一点的一种可能方法是在视图中添加条件把手块并根据属性状态渲染组件；但是，我希望让我的视图尽可能干净，并认为如果我可以仅在触发操作时将组件动态呈现到视图中会更好。

我的解决方案

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

在视图的控制器中

export default Ember.Controller.extend({
    cardEditor: false,

    actions: {
        addNewCardEditor() {
            this.set('cardEditor', true));
        }
    }
});

我的尝试

基于答案How to programatically add component via controller action in ember 2.x，但它对我不起作用。我收到一个错误，

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.

在视图 HTML 中，

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

查看路线内，

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

问题

所以我的问题是如何使用routes/home/index.js 中的操作将组件渲染到视图。

视图 HTML，

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

索引页面路由，

import Ember from 'ember';

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

我应该在addNewCardEditor 函数中放入什么来动态生成视图中的组件？

感谢您的宝贵时间。

【问题讨论】：

您的解决方案对我来说很完美。只有当card-editor 为真时，card-editor 组件才会被实例化/渲染。我认为您正在尝试的（以编程方式添加组件）对于您的用例来说太过分了。海事组织
在 ember 中使用 {{#if}} 助手绝对是正确的解决方案。解决此问题的唯一其他方法是使用路由层次结构。要以编程方式更改 DOM，添加组件和类似的东西是您在 ember 中应该尽可能避免的事情。

标签： ember.js

【解决方案1】：

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

导出函数初始化（应用程序）{ window.EmberApp = 应用程序； // 或 window.Whatever }

在您想要动态创建组件的地方，即使它看起来像一个 hack，也可能有更简洁的方法来完成它，而不依赖于 EmberCLI 变量。下面的“App”是您在 application.js 中定义的全局 EmberCLI 应用程序的命名空间。

var 组件 = App.CardEditorComponent.extend({ 渲染器：window.EmberApp.__container__.lookup('renderer:-dom'), }）。创造（）; Ember.setOwner(组件, 窗口.EmberApp); 组件.append();

【讨论】：

__container__.lookup 它的双重私有 API ！！