Ember.js Ember.Templates.helpers input()方法
Ember.js 是一个基于Model-View-Controller (MVC)架构用于开发大型客户端Web应用的开源JavaScript框架。Ember.js是最广泛使用的前端应用框架之一。它的目标是加快开发速度并提高生产力。目前,它被许多网站使用,包括Square、Discourse、Groupon、Linked In、Live Nation、Twitch和Chipotle。
input() 方法用于创建HTML的<input>
元素。
语法:
{input hash}
参数:
- hash: 它是一个哈希对象。
安装和运行Ember.js的步骤:
步骤1: 要运行以下示例,您需要有一个Ember项目。要创建一个,您需要先安装ember-cli。在终端中输入以下代码:
npm install ember-cli
步骤2: 现在您可以通过键入以下代码片段来创建项目:
ember new <project-name> --lang en
要启动服务器,请键入:
ember serve
示例1: 输入以下代码以生成此示例的路由:
ember generate route input1
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
data = '';
@tracked
ar = [
'Ram',
'Lalu',
'Rohit',
'Pokhu',
'Arabh',
'Sam',
]
@action
add(item) {
this.ar.addObject(item);
}
}
app/components/arr.hbs
{{#each this.ar as |temp|}}
<li>{{temp}}</li>
{{/each}}
<br/>
<br/>
<label>Enter Name : </label>
{{input value=this.data}}
<br/>
<input type="Button" value="Add"
{{action 'add' this.data}}/>
app/templates/input1.hbs
{{page-title "Input"}}
<h2>
Describing input
</h2>
<Arr/>
输出:
示例2: 输入以下代码以生成此示例的路线:
ember generate route input2
app/components/list.js
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
export default class ListComponent extends Component {
@tracked
s = false;
@action
show() {
this.s = true;
}
get p() {
return document.querySelector('#list');
}
}
app/components/list.hbs
{{#if this.s}}
{{#in-element this.p}}
{{#each @a as |temp|}}
<li>
{{temp}}
</li>
{{/each}}
{{/in-element}}
{{/if}}
<input type="Button" value='Show list'
{{on 'click' this.show}}>
app/templates/input2.hbs
{{page-title "input"}}
Describing input :
<div id="list"></div>
<List @a={{array 'Sam' 'Rahul' 'Dadu' 'Arabh' }} >
</List>
输出:
参考: https://api.emberjs.com/ember/release/classes/Ember.Templates.components/methods/Input?anchor=Input