时间戳

首页 > 解决方案 > 以编程方式渲染组件（不是通过模板）

javascript - 以编程方式渲染组件（不是通过模板）

问题描述

我正在开发一个与具有自己的自定义 UI 组件的单独 SDK 集成的 Ember 应用程序。例如，

<integration-name-customer-view customer-name="Bob">

这些组件具有渲染生命周期钩子，例如onRender,onCreate等。

我想挂钩onRender回调并插入我创建的 Ember 组件（具有一些特殊功能的工具提示）。

这是我尝试过的：

集成-客户-名称定义

import MyTooltip from 'ember-app/components/my-tooltip';    

...

onRender() {
    let parent = this;

    MyTooltip
        .extend({
            layout: myTemplate,
            didRender() {
                parent.appendChild(this.element);
            }
        })
        .create({ position: 'above' })
        .appendTo(document.body);
}

现在，这确实有效，但我有两个问题：

  1. 这是正确的做法吗？有没有更简单的方法/这会崩溃和燃烧吗？
  2. 我的模板中有一个{{yield}}块。有没有办法以编程方式确定要渲染到该块中的内容？

标签： javascriptember.js

解决方案

推荐阅读