使用 ember-maybe-in-element 将组件移动到另一个 DOM 节点

Question

我有一个用例，我可以将子组件动态移动到同一页面/路由内的不同 DOM 位置。

主页.hbs

<div class="container">
  <div class="content">
    <!-- Place where I want to place Child -->
   </div>
</div>
<Parent></Parent>

父母.hbs

<h1>This is parent component</h1>
<Child></Child>

儿童.hbs

Hello World

孩子.js

const mainContainer = document.querySelector('.container .content');
const myElm = this.element.querySelector('[data-child-content]');
mainContainer.appendChild(myElm);

我想使用ember-maybe-in-element插件而不是使用appendChild 。

Answer 1

元素内助手将常规流之外的块内容呈现到由其 destinationElement 位置参数给出的 DOM 元素中。

孩子.js

get destinationElement() {
  return document.querySelector('.container .content');
}

儿童.hbs

{{#in-element this.destinationElement}}
   <div>Hello World</div>
{{/in-element}}