magix中的2种事宜绑定体式格局

可操纵html与js

magix采纳htmljs文件星散的写法,当我们在浏览时,愿望能直观的看出节点绑定了哪些事宜或这个函数是为哪一种事宜效劳的。
以下html

<div>
    <button mx-click="save()">save</button>
    <!-- htmls -->
</div>

我们在浏览上述html片段时,可直观的看到内容为savebutton绑定了click事宜,且挪用的是save要领

再以下js

render: function() {
    //render codes
},
'save<click>': function(e) {
    console.log('save clicked');
}

我们在浏览时可以晓得save这个函数是为click事宜效劳的,如许在星散浏览它们时,可以疾速晓得它们是做什么用的,不需要往返切换jshtml才可以晓得事宜的绑定。

这类计划优于经由过程选择器查找到节点动态绑定事宜。

全局与插件

前述计划仅适用于能经由过程html标签绑定,但有些全局对象如windowdocument并没有对应的html标签,所以这类要怎样绑定?

再如我们开辟一个插件,比方列表前面带checkbox,最顶部有一个全选的按钮,经由过程点击全选按钮可以疾速选中这些checkobxhtml构造能够以下

<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

    原文作者:行列
    原文地址: https://segmentfault.com/a/1190000006169795
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞