使用 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}}