迷你MVVM框架 avalonjs 学习教程四、数据填充

时间 2019-11-11

标签迷你 mvvm 框架 avalonjs 学习教程数据填充繁體版

原文原文链接

MVVM是前端的究极解决方案，大家可能用过jQuery，但那个写的代码不易维护；大家能够听过说requirejs与seajs，传说中的模块开发，加载器，但它们的最终目标是打包；大家可能听过underscope，那是一个工具集；大家能够据说过ejs，Mustache、HandlebarsJS等模板引擎，它们是用来替代字符串拼接……凡此种种，它们在咱们的业务开发中只是不多的部分，带来的帮助也颇有限。前端开发，贯彻始终的是如何将后端的数据显示出来，将用户的输入格式化送到后端，都离不开DOM操做，而DOM操做正是许多新手或从后端过来的人所惧怕。相比于JS的那点语法，DOM是最庞杂的，三次浏览器大战留下的遗患至今没有消弥，处处是地雷，所以咱们怎么放心让新人去趟这祸水呢。jQuery为开发者发一个水泡，让大家淹不死。但最佳方式，就是把这些腐败沼泽都填了。avalon作到了，纯数据操做的时代到来了。javascript

前三节就分别介绍了做用域，ViewModel，绑定属性什么的，它们是咱们的主角。其中ViewModel是咱们操做的主体，绑定属性是让咱们脱离DOM操做的关键。全部对ViewModel的操做，最终交由绑定属性实现各类DOM功能。DOM功能是一个很范的概念，好比添加删除类名，移除节点，让某个元素看不见，为元素添加某个属性或某个事件……今天咱们介绍的就是最经常使用数据填充功能，让后端的数据在页面展现出来。MVVM是如此强大，估计今明年，大家会愈来愈频繁地看到有关前端MVVM的主题分题，PPT。做为一个简单的示例，它们务必包含数据填充功能的展现。css

数据填充是avalon最简单的功能，将数据打印到页面上。这是全部后端模板最基本的功能，而后加上each， if， include等语法，实现更精细的制定。avalon经过绑定属性，其实将整个页面变成一个动态模板(详看这里)。将数据输出到页面涉及到如下指令。html

{{prop}}
{{prop|html}}
ms-text
ms-html
ms-value
ms-duplex

{{prop}}是最简单实用的指令，什么helloworld用它作最适合了。前端

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script src="avalon.js"></script>
        <script>
            avalon.define({
                $id: "test",
                word: "Hello Avalon"
            })
        </script>
    </head>
    <body>
        <div ms-controller="test">
            <h1>{{word}}!!!!!</h1>
        </div>
    </body>
</html>

{{prop | html}}实际上是加一个过滤器，也只有文本节点中的插值表达式能够加各类过滤器实现各类功能。html过滤器就是将此字符串转换HTML节点再插入当前位置。不过这个{{prop|html}}，框架是对它开了小灶，容许它原本就是一个元素节点或NodeList。java

ms-text与ms-html其实就是{{prop}}、{{prop|html}}的真身，框架内部都是走同一处理函数。不过ms-text、 ms-html做为一个绑定属性，必须附于元素节点之上，所以没有前者那么方便。git


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script src="avalon.js"></script>
        <script>
            avalon.define("test", function(vm) {
                vm.text = "<b> 1111  </b>"
            })
        </script>
    </head>
    <body>
        <div ms-controller="test">
            <div><em>用于测试是否被测除</em>xxxx{{text}}yyyy</div>
            <div><em>用于测试是否被测除</em>xxxx{{text|html}}yyyy</div>
            <div ms-text="text"><em>用于测试是否被测除</em>xxxx yyyy</div>
            <div ms-html="text"><em>用于测试是否被测除</em>xxxx yyyy</div>
        </div>
    </body>
</html>

此外，咱们还能够经过config方法，更改插值表达式的界定符，由于{{}}可能被其余框架的模板所占用。建议界定符的长度大于1，不要设置为>>这样的位操做符。好比在DOMReady以前，咱们调用以下语句：angularjs

avalon.config({
   interpolate: ["<%", "%>"] //  要求openTag 不等于closeTag就能配置成功
})

像上面那样，因为网速慢把插值表达式暴露出来的问题，咱们能够定义这样一个样式规则进行处理，这有点类于angularjs的ng-cloak指令，在扫描以前起着羞丑布的做用。当扫描事后，框架会去掉绑定属性，及ms-controller、ms-important这两个类名，它们就显示出来了。github

.ms-controller, .ms-important{visibility:hidden}

上述四种指令是用在文本节点上，但数据还能经过表单元素的value值显示出来，因而有了ms-value指令。ms-value为了应对复杂的显示，也支持插值表达式，但里面不能使用过滤器。后端

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script src="avalon.js"></script>
        <script>
            avalon.define({
                $id: "test",
                text: "<b> 1111  </b>"
            })
        </script>
    </head>
    <body>
        <div ms-controller="test">
            <input ms-value="text"/>
            <textarea ms-value="xxxxxxxx{{text+'!!'}}yyyyyyyy"/></textarea>
        </div>
    </body>
</html>

上面的功能，后端模板与前端模板也能作到，但ms-duplex就逆天了。它是avalon实现双向绑定的一个重要绑定。双向绑定通俗说，当咱们修改ViewModel的属性，经过Object.defineProperty重写属性的setter，getter同步视图，而在视图上偷偷绑定一些input、click、change事件，将元素的value同步到ViewModel上。ms-duplex就是这样干，也意味着它只对表单元素生效。avalon为文本域，文本区，密码域这三个控件绑定了input事件，换言之，用户每改一个字符都会当即发生同步，固然用户能够在元素定义data-duplex-event=”change”属性，就能够改为change事件。对于单选框，复选框，下拉条是绑定了change事件。数组

在IE6-8下，没有input事件，avalon使用onpropertychange事件，单选框复选框的change事件有BUG，改用click事件，总而言之，avalon设法让旧式IE与W3C浏览器保持一致。

若是用户想在内容发生改变后执行某一回调，avalon也提供了data-duplex-changed回调。此外，用户也能够在VM上使用$watch回调进校订。所以，有了ms-duplex作数据验证是很是简单的。

咱们还能够在元素节点上定义data-duplex-observe=”false”来禁止双向同步。

ms-duplex还能够接第三个参数，总括起来，它们的语法以下：

ms-duplex=”prop” 当元素为text, password, textarea时，要求prop为一个字符串，当咱们改动它的内容时，avalon就会将此元素的value值赋给prop（在默认状况下，是使用input事件进行绑定，即每改动一个字符，都会进行同步，你们也能够指定data-duplex-event="change"，改用change事件进行绑定）当元素为radio时，要求prop为一个布尔，当咱们改动它的内容时，avalon就会将此元素的checked值（布尔）赋给prop 当元素为checkbox时，要求prop为一个数组，当咱们改动它的内容时，avalon就会将此元素的value值push进prop 当元素为select时，要求prop为一个字符串或数组（视multiple的值），当咱们选中它的某一个项时，avalon就会将此option元素的value值或text值（没有value时）push进prop。

ms-duplex-text=”prop” 只能用于radio，用于模拟text控件的行为，要求prop为一个字符串，当咱们选中某一个radio时，avalon就会将此元素的value值赋给prop 用于实现多选一。

ms-duplex-radio=”prop” 只能用于checkbox，用于模拟radio控件的行为，要求prop为一个布尔，当咱们选中某一个checkbox时，avalon就会将此元素的checked值（布尔）赋给prop 多用于实现GRID中的全选/全不选功能

ms-duplex-bool=”prop” 只能用于radio，要求prop为一个布尔，而且元素的value为“true”或“false”，当咱们选中某一个radio时，avalon就会将此元素的value转换为布尔，赋给对应的prop。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="avalon.js"></script>
        <script>
            avalon.define({
                $id: "test",
                aaa: {
                    xxx: "444",
                    yyy: "555"
                },
                bbb: "yyy",
                zzz: "text"
            })
        </script>
    </head>
    <body ms-controller="test">
        <input ms-duplex="aaa['xxx']"><br/>
        <input ms-duplex="aaa[bbb]"><br/>
        <input ms-duplex="zzz" ms-data-duplex-observe="zzz"/>当这里的值变成false,就会禁止双向同步
        <p>{{aaa.xxx}}</p>
        <p>{{aaa.yyy}}</p>
        <p>{{zzz}}</p>
    </body>
</html>

这里有更多ms-duplex的例子。弄懂它们就能够处理大多数表单需求了，而后你就会以为生活变美好了一些。这快感正如咱们一开始从原生JS转到jQuery的那样。时代老是在进步的，早期了解MVVM，早期摆脱DOM的桎梏！