#8 Actions
来源:互联网 发布:怎么申请开通80端口 编辑:程序博客网 时间:2024/06/02 05:24
英文原版:https://guides.emberjs.com/v2.13.0/templates/actions/
你的应用肯定需要一些用户的交互功能。比如,想象一下我们现在有一个模板用来展示了一个帖子的标题,并且当点击标题的时候,帖子的内容会被展示出来。
如果你在HTML DOM元素上使用{{action}}助手,当用户点击这个元素的时候,那么一个被你命名的action事件就会被发送到当前模板对应的组件或者controller中。
app/templates/components/single-post.hbs<h3><button {{action "toggleBody"}}>{{title}}</button></h3>{{#if isShowingBody}} <p>{{{body}}}</p>{{/if}}
接下来,在这个组件或者controller中,你只需要在actions中定义这个action 函数来接收这个action就可以了:
app/components/single-post.jsimport Ember from 'ember';export default Ember.Component.extend({ actions: { toggleBody() { this.toggleProperty('isShowingBody'); } }});
你将会在Triggering Changes With Actions章节中接触到更高级的用法,不过在这之前你需要先熟悉本章节的基本知识。
action Parameters
你可以选择性的给ction处理函数传递参数。任何在action名称后面的值都会被当做参数传递给action处理函数
例子,post就是参数:
<p><button {{action "select" post}}>✓</button> {{post.title}}</p>
“select” 处理函数将会接收post模型作为它的参数:
app/components/single-post.jsimport Ember from 'ember';export default Ember.Component.extend({ actions: { select(post) { console.log(post.get('title')); } }});
指定事件类型
默认的,{{action}}助手会对click事件进行监听。
不过,你也可以指定你想监听的事件:
<p> <button {{action "select" post on="mouseUp"}}>✓</button> {{post.title}}</p>
在这里,对于事件名称,你必须使用驼峰命名法。
辅助键
默认的,{{action}}助手会在click事件中忽略辅助键。不过你可以通过allowedKeys属性来指定需要支持的按键:
<button {{action "anActionName" allowedKeys="alt"}}> click me</button>
允许浏览器默认行为
默认的,{{action}}助手会阻止默认浏览器的默认DOM行为。不过这个功能也是可以被关闭的。
比如,现在我们有个正常的link,现在我们想要关闭Ember默认阻止浏览器行为的行为:
<a href="newPage.htm" {{action "logClick" preventDefault=false}}>Go</a>
当没有配置preventDefault=false时,Ember会触发action函数,用户会停留在当前页。
当配置了preventDefault=false时,Ember会触发action函数,用户会被导航到新的页面。
配置action的第一个参数
如果你在{{action}}助手中设置了value选项,那么它的值会被当做参数被传递到action中。这个功能挺友好,可以把它当做单向绑定来使用:
<label>What's your favorite band?</label><input type="text" value={{favoriteBand}} onblur={{action "bandDidChange"}} />
我们假设下,现在我们有一个action处理函数,并且它将打印传入的参数:
actions: { bandDidChange(newValue) { console.log(newValue); }}
默认的,action处理函数接受的参数来自于事件监听器,它是被浏览器传入的事件对象,所以bandDidChange()将会打印 Event( )。
通过使用value选项,可以把我们需要的属性从事件对象中提取出来:
<label>What's your favorite band?</label><input type="text" value={{favoriteBand}} onblur={{action "bandDidChange" value="target.value"}} />
这时候,newValue参数的值将会变成input中输入的值。
将action应用在非可点击的元素上
需要注意的事,actions几乎可以使用在任何的DOM元素上,但是不是所有的元素都会对click事件做出响应。比如,在一个没有href属性的a元素或者div元素上使用action,有些浏览器就不会执行相关的函数。
如果,你真的需要在这些元素上定义action, 那么有个通过CSS的方式来使得他们可以响应click。比如:
[data-ember-action]:not(:disabled) { cursor: pointer;}
请记住,就算有这个解决方案,click事件仍然不能通过点击键盘来触发( 例如: enter键 ),浏览器仅仅会在天生支持点击的元素上支持此行为。
本节完
- #8 Actions
- actions
- Actions
- Actions
- Actions
- Actions
- Actions
- #8 通过Actions触发变化
- [actions] -- actions简单使用
- [actions] -- actions详细使用
- RANKING ACTIONS
- Activity ActionS
- JSP - Actions
- JSP Actions
- Actions 动作
- Some important actions
- Actions的说明
- Eclipse RCP: Declarative Actions
- JavaScript Array 对象
- 机器学习实战 朴素贝叶斯
- 如何理解AOP
- CKEditor图片上传
- mysql格式化日期
- #8 Actions
- JavaScript String 对象
- 32. Longest Valid Parentheses
- java反射机制剖析— Class Loader
- Python学习系列:函数参数
- commons-fileupload的ServletFileUpload类
- 圆环决斗
- MySQL 事务
- angularjs中的几种服务的详细分析(转)