Question

我正在创建一个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函数中放置什么来动态生成视图中的组件？

感谢您的时间。

Answer 1

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


    export function initialize(application) {
        window.EmberApp = application;  // or window.Whatever
    }

您希望动态创建组件，即使它看起来像是黑客，但可能有更简洁的方法来执行它而不依赖于EmberCLI变量。下面的“App”是您在application.js中定义的全局EmberCLI应用程序的命名空间。


    var component = App.CardEditorComponent.extend({ 
        renderer: window.EmberApp.__container__.lookup('renderer:-dom'),
    }).create();

    Ember.setOwner(component , window.EmberApp);
    component.append();

通过操作动态添加/删除组件到页面

1 个答案: