可操作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