magix中的2种事件绑定方式
可操作html与js
magix
采用html
与js
文件分离的写法,当我们在阅读时,希望能直观的看出节点绑定了哪些事件或这个函数是为哪种事件服务的。
如下html
<div><button mx-click="save()">save</button><!-- htmls -->
</div>
我们在阅读上述html
片断时,可直观的看到内容为save
的button
绑定了click
事件,且调用的是save
方法
再如下js
render: function() {//render codes
},
'save<click>': function(e) {console.log('save clicked');
}
我们在阅读时可以知道save
这个函数是为click
事件服务的,这样在分离阅读它们时,能够快速知道它们是做什么用的,不需要来回切换js
和html
才能够知道事件的绑定。
这种方案优于通过选择器查找到节点动态绑定事件。
全局与插件
前述方案仅适用于能通过html
标签绑定,但有些全局对象如window
和document
并没有对应的html
标签,所以这种要如何绑定?
再如我们开发一个插件,比如列表前面带checkbox
,最顶部有一个全选的按钮,通过点击全选按钮可以快速选中这些checkobx
,html
结构可能如下
<table mx-view="coms/select/all"><thead><tr><th><input type="checkbox" data-linkage="all" /></th></tr></thead><tbody><%for(var i=0;i<100;i++){%><tr><td><input type="checkbox" data-linkage-parent="all" /></td></tr><%}%></tbody>
</table>
我们希望开发一个js插件,用于这个全选功能,如示例中的table
增加一个mx-view
属性值为coms/select/all
当我们在实现这样的插件时,用于html
结构是别的开发者提供的,做为插件提供方是无法操作html
标签结构的,所以这时候我们如何绑定事件?
这2种情况就直接使用类库的事件绑定机制即可,以jQuery
为例
init: function() {$(window).on('scroll', function() {//scroll codes});
}
这也是 https://github.com/thx/magix/... 这个不再支持的原因。
总结就是:可操作html的,用magix提供的方案,否则就用类库的方案绑定
欢迎试用magix,区块化管理利器 https://github.com/thx/magix/...
magix https://github.com/thx/magix
欢迎star与fork
magix中的2种事件绑定方式相关推荐
- angular移除事件绑定事件绑定_002-js的三种事件绑定方式
不说太多虚的,这次要聊的,是JavaScript的三种事件绑定方式. 方法1:直接在HTML中指定,称为"内嵌"会不会更合适一点? (1)直接在HTML的属性里写代码 示例代码: ...
- jQuery中的四种事件监听方式
jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前,先来声明一个例子 ...
- HTML中详述jQuery事件绑定方式
jQuery事件绑定方式 1.bind()方法: bind(type,[data],fn):为每个匹配元素的特定事件绑定对应的事件处理函数,各参数含义如下: type表示事件类型,多个事件类型使用空格 ...
- js第13天(事件绑定方式)
目录 前言 1.DOM0级方式 2.DOM2级方式 3.绑定方式的优缺点 4.事件解绑 二.事件的执行机制 1.事件对象 2.事件目标对象 三.事件传播 四.事件委托 1)原理:事件冒泡实现 2)事件 ...
- SNF快速开发平台MVC-各种级联绑定方式,演示样例程序(包含表单和表格控件)...
做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...
- java按钮权限控制_详解Spring Security 中的四种权限控制方式
Spring Security 中对于权限控制默认已经提供了很多了,但是,一个优秀的框架必须具备良好的扩展性,恰好,Spring Security 的扩展性就非常棒,我们既可以使用 Spring Se ...
- Android中的5种数据存储方式
Android中的5种数据存储方式 Android中的5种数据存储方式 数据存储在开发中是使用最频繁的,在这里主要介绍Android平台中实现数据存储的5种方式,分别是: 1 使用SharedPref ...
- PG中的几种数据类型转换方式
PG中的几种数据类型转换方式 1.通过格式化函数进行转换 函数 返回类型 描述 示例 to_char(timestamp,text) text 把时间戳转换成字符串 to_char(current_t ...
- 通读《C++ primer plus》— C++中的5种数据类型转换方式
通读<C++ primer plus>-记录一 C++中的5种数据类型转换方式 1.始化和赋值时转换 比如 int a=1; long b=2147483647; a=b; 上面的代码并不 ...
最新文章
- Java项目:网盘系统设计和实现(java+ssm+jpa)
- mysql 连接 分组_详解MySQL中的分组查询与连接查询语句
- LeetCode-剑指 Offer 12. 矩阵中的路径
- C++ :vector的使用
- Gartner: 2016年十大安全预测
- 2022年版955不加班公司名单!
- 【文本分类】 特征抽取之信息增益
- 【字符串全排列】LeetCode 567. Permutation in String
- Android 原生 MediaPlayer 和 MediaCodec 的区别和联系(二)
- 华为、阿里、京东停止社招转外包:头部公司们的谋局
- Android面试简历
- 二进制编辑和进程监控工具
- 怎么批量修改pdf文件名
- Linguist for Mac(mac菜单栏语言翻译工具)
- Web——HTML常见标签及用法
- Docker容器之搭建本地私有仓库
- 炒股狂人的悲惨经历 从120万炒到10万
- 计算机视觉--实时车速检测
- 面试题测试APP汇总:快快来收藏起来背背吧
- 【Axure高保真原型】下拉分级选择器