Ember.js 入门指南——处理事件

原创
2015/10/13 00:25
阅读数 547

ber.js 指南——处理事件

       你可以在组件中响应事件,比如用户的双击、鼠标滑过、键盘的按下等等事件。只需要在组件类中增加Ember提供的处理事件,然后Ember会自动判断用户的操作执行相应的事件,只要在组件类中添加的事件不冲突你甚至一次性增加多个事件,事件执行次序根据触发的次序执行。

 

1,简单事件处理

准备工作,使用Ember CLI创建演示所需文件:

ember g component handle-events
ember g route component-route


生成的组件模板不做任何修改。
<!--  app/components/handle-events.hbs -->
 
{{yield}}

 

注意看组件类的实现:

//  app/components/handle-events.js
 
import Ember from 'ember';
 
export default Ember.Component.extend({
       click: function() {
              alert('click...');
 
              return true;  // 返回true允许事件冒泡到父组件
       },
       mouseLeave: function() {
              alert("mouseDown....");
 
              return true;
       }
});

    在组件类中增加了两个事件clickmouseLeaver,一个是单击事件一个是鼠标移开事件,更多Ember支持的事件请看这里 

       调用组件的模板如下:

<!--  app/templates/component-route.hbs  -->
 
{{#handle-events}}
<span style="cursor: pointer;">从我身上飘过或者点我都会触发事件~</span>
{{/handle-events}}

       当用户只是把鼠标从文字从我身上飘过或者点我都会触发事件~”上划过市只执行mouseLeave事件,当用户点击文字时先执行click事件再执行mouseLeave事件,因为用户点击文字时鼠标还没移开。

       但是如果你增加的事件是有冲突的可能会得到无法预知的结果,比如在组件类中增加了双击和单击事件,此时只会执行单击事件,双击事件就无法触发。

 

2,发送行为

       某些情况下,你的组件需要支持拖放事件。比如组件可能要发送一个iddrop事件中。

{{drop-target action=”didDrop”}}

 

       你可以定义组件的事件处理器去管理drop事件。如果有需要可以通过返回false防止事件冒泡。

//  app/components/drop-target.js
 
import Ember from 'ember';
 
export default Ember.Component.extend({
       attribuBindings: ['draggable'],
       draggable: 'true',
 
       dragOver: function() {
              return false;
       },
       didDrop: function(event) {
              let id = event.dataTransfer.getData('text/data');
              this.sendAction('action', id);
       }
});

 

       本章内容不多,重点是第一点的内容,第二点的内容就简单介绍,更多详细信息请移步官网文档


展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部