Ember.js Ember.Templates.helpers in-element() 方法

Ember.js 是一个开源的JavaScript框架，用于开发基于Model-View-Controller (MVC) 架构的大型客户端Web应用程序。Ember.js 是最广泛使用的前端应用程序框架之一。它旨在加快开发速度和提高生产力。目前，它被许多网站使用，包括Square、Discourse、Groupon、Linked In、Live Nation、Twitch和Chipotle等。

in-element() 方法用于将块内容呈现到由其目标定位参数指定的DOM元素中，使其脱离常规流程。

语法:

{{in-element destinationTagId}}

参数:

• destinationTagId（目标标签ID）： 它是标识块内容呈现位置的目标位置参数。

安装和运行Ember.js的步骤：

步骤1： 要运行以下示例，您需要一个ember项目。要创建一个，您需要首先安装ember-cli。在终端中写下以下代码：

npm install ember-cli

步骤2： 现在，您可以通过输入以下代码来创建项目：

ember new <project-name> --lang en

启动服务器，输入：

ember serve

示例1： 输入以下代码以生成此示例的路由：

ember generate route element1

app/components/list.js

import Component from '@glimmer/component'; 
import { tracked } from '@glimmer/tracking'; 
  
export default class ListComponent extends Component { 
    get p() { 
        return document.querySelector('#list-show'); 
    } 
} 

app/components/list.hbs

{{#in-element this.p}} 
    {{#each @a as |temp|}} 
        <li> 
              {{temp}} 
        </li> 
      {{/each}} 
{{/in-element}}

app/templates/element1.hbs

{{page-title "in-element"}} 
Describing in-element :  
<div id="list-show"></div> 
<List @a={{array 'Sam' 'Rahul' 'Dadu' 'Arabh' }} @p={{true}}> 
</List>

输出：

示例2： 输入以下代码以生成此示例的路由：

ember generate route element2

app/components/arr.js

import Component from '@glimmer/component'; 
import { tracked } from '@glimmer/tracking'; 
import { action } from '@ember/object'; 
  
export default class Arr2Component extends Component { 
    @tracked 
    showlist = false; 
    @action 
    change() { 
        this.showlist = true; 
    } 
} 

app/components/arr.hbs

<button type="button" {{on "click" this.change}}> 
    Append list 
</button> 
<div id="list"></div> 
<Arr2 @show={{this.showlist}} />

app/components/arr2.js

import Component from '@glimmer/component'; 
  
export default class Arr2Component extends Component { 
    get destiny() { 
        return document.querySelector('#list'); 
    } 
} 

app/components/arr2.hbs

{{#if @show}} 
    {{#in-element this.destiny}} 
        <ul> 
              <li>Ram</li> 
              <li>Lalu</li> 
              <li>Rohit</li> 
              <li>Arabh</li> 
              <li>Sam</li> 
            <li>Pokhu</li> 
        </ul> 
  {{/in-element}} 
{{/if}}

app/templates/elements2.hbs

{{page-title "In-Element"}} 
<h2> 
    Describing in-element helper 
</h2> 
<Arr/> 

输出：

参考： https://api.emberjs.com/ember/4.6/classes/Ember.Templates.helpers/methods/in-element?anchor=in-element