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/>
输出: