Ember.js Ember.Templates.helpers outlet()方法
Ember.js是一个开源的JavaScript框架,用于开发基于Model-View-Controller(MVC)架构的大型客户端Web应用程序。 Ember.js是最常用的前端应用程序框架之一。它旨在加快开发速度并提高生产力。目前,它被许多网站使用,包括Square,Discourse,Groupon,Linked In,Live Nation,Twitch和Chipotle。
outlet()方法用于指定子路由在模板中渲染的位置。
语法:
{{ outlet }}
安装和运行Ember.js的步骤
步骤1: 要运行下面的示例,您需要有一个Ember项目。要创建一个项目,您需要首先安装ember-cli。在终端中写下以下代码:
npm install ember-cli
步骤 2: 现在您可以通过输入以下代码片段来创建项目:
ember new <project-name> --lang en
要启动服务器,请输入:
ember serve
示例1: 在此示例中,输入以下代码以生成路线:
ember generate route outlet1
app/components/arr2.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { mapBy } from '@ember/object';
export default class extends Component {
student = [{
"name": "Sam Snehil",
"age": 21
},
{
"name": "Satyam Sahu",
"age": 23
},
{
"name": "Sohan Argrwal",
"age": 25
},
{
"name": "Sreya Sarma",
"age": 19
}
,
{
"name": "Satyam Sahu",
}];
print(item) {
let ans = this.student.filterBy('name', item)
alert(JSON.stringify(ans));
}
}
app/components/arr2.hbs
{{yield}}
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
{{#each this.student as |detail|}}
{{#unless detail.age}}
<tr>
<td>{{get detail 'name'}}</td>
<td>{{18}}</td>
</tr>
{{else}}
<tr>
<td>{{get detail 'name'}}</td>
<td>{{get detail 'age'}}</td>
</tr>
{{/unless}}
{{/each}}
</table>
<br />
{{textarea value=this.value}}
<br />
<input type="button" id="set-code"
value="Introduce Student"
{{action 'print' (mut this.value)}} />
app/templates/text1.hbs
<Arr2>
<h1>List of Student :</h1>
</Arr2>
{{outlet}}
输出:
示例2: 输入以下代码以生成该示例的路由:
ember generate route outlet2
app/components/arr.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action, addObjects } from '@ember/object';
export default class CompactComponent extends Component {
items = ['Oxygen',
'Source Code',
'Infine',
'Tenet',
'SpiderHead',
'The Thing',
'A Quiet Place',
'The Invisible Man',
'Looper',
'Ad Astra',];
@action
remove(data) {
this.items.removeObject(data);
}
}
app/components/arr.hbs
{{#unless @show}}
This comoponent Don't Have block!!<br />
{{else}}
<ul>
<h3>{{yield}} : </h3>
{{#each this.items as |party|}}
<li>{{party}}</li>
{{/each}}
</ul>
<br />
{{textarea value=this.value}}
<br />
<input type="button" id="check-atIndex"
value="Remove" {{action "remove" this.value}} />
<br /><br />
{{/unless}}
app/templates/outlet2.hbs
<Arr @show={{true}}>
List of items
</Arr>
{{outlet}}
<Arr/>
输出:
参考: https://api.emberjs.com/ember/4.6/classes/Ember.Templates.helpers/methods/outlet?anchor=outlet