文档章节

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

ubuntuvim
 ubuntuvim
发布于 2015/10/13 00:25
字数 692
阅读 489
收藏 0

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);
       }
});

 

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


© 著作权归作者所有

ubuntuvim
粉丝 33
博文 76
码字总数 98477
作品 1
深圳
后端工程师
私信 提问
Ember.js 入门指南——总目录

Ember.js 是什么?我想对于想学习它的人应该知道它是个什么东西,如果你想了解那就赶紧去 Google 或者百度,本系列教程是通过学习官网教程然后摘抄个人觉得比较重要的部分,加上学习实例整合...

ubuntuvim
2015/10/25
1K
2
Ember.js 入门指南--目录

本系列文章全部从(http://ibeginner.sinaapp.com/)迁移过来,欢迎访问原网站。 Ember.js 是什么?我想对于想学习它的人应该知道它是个什么东西,如果你想了解那就赶紧去 Google 或者百度,...

ubuntuvim
2015/09/07
389
2
Ember.js 入门指南——路由简介

从本文开始,将为大家介绍路由(route),如果你看过前面的《Ember.js 入门指南——{{link-to}} 助手》这篇文章应该初步了解了route。不过在这篇文章中只是简单介绍了路由是定义、路由层次,...

ubuntuvim
2015/09/22
474
0
从服务器获取数据,引入组件

博文原址:http://blog.ddlisting.com/2016/04/21/yin-ru-zu-jian/ 接着前面四篇: 环境搭建以及使用Ember.js创建第一个静态页面 引入计算属性、action、动态内容 模型,保存数据到数据库 发...

ubuntuvim
2016/04/26
73
0
Ember.js 入门指南——模板渲染

路由的另一个重要职责是渲染同名字的模板。 比如下面的路由设置,posts路由渲染模板posts.hbs,路由new渲染模板posts/new.hbs。 Router.map(function() { this.route('posts', function() {...

ubuntuvim
2015/09/25
446
0

没有更多内容

加载失败,请刷新页面

加载更多

CQRS与AXON

CQRS 看了蛮多文章,只会CRUD,却不懂CQRS,CQRS是遵循DDD思想而产生的一种模式,Command and Query Responsibility Segregation 命令与查询隔离。查询就直接通过正常的模式service调dao层。...

无极之岚
39分钟前
5
0
OSChina 周三乱弹 —— 欢迎你来做产品经理

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :10多次劲歌金曲获奖,更多叱咤歌坛排名,黎明才应该是四大天王之首,只可惜拍的电影太少。单曲循环一个多月的歌,力荐 《无名份的...

小小编辑
54分钟前
173
9
500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。 帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!...

上海小胖
今天
9
0
关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
7
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部