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