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