avalonjs学习笔记（四）

最新推荐文章于 2021-08-15 18:22:40 发布

混事儿

最新推荐文章于 2021-08-15 18:22:40 发布

阅读量1.3k

点赞数

分类专栏： avalonjs 学习笔记文章标签： avalonjs

本文链接：https://blog.csdn.net/u014761456/article/details/42344471

版权

学习笔记同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

avalonjs

5 篇文章 0 订阅

订阅专栏

四，一些特殊的绑定

1，ms-if

我不知道这个设计是用来做什么用的，我看的结果就是显示隐藏用，当绑定的值不是true的时候，这个标签就不会被显示出来

2，ms-visible

貌似这个才是真正显示隐藏用的，跟ms-if的差别，貌似很深奥，表示不懂。

3，循环绑定

循环有两种，一个使用ms-each-item

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ms-if</title>
    <script t src="avalon.modern.min.js"></script>
</head>
<body ms-controller="test">
 
<ul ms-each-item="array">
    <li ms-click="$remove" ms-if="$index % 2 == 0">{{ item }} --- {{$index}}</li>
</ul>
 
 
<script type="text/javascript">
 
    avalon.define({
        $id: "test",
        array: "a,b,c,d,e,f,g".split(",")
    });
 
</script>
</body>
</html>

在ul标签设置了ms-each-item，然后这个标签里面的东西就会被按照array的数量进行重复。

item是array里的每个项的值。这个是可以指定的ms-each-abc的话，abc就代表了这个值。如果不写，el代表了这个值

$index就是array的索引。

第二种方法是ms-repeat，貌似和ms-each用法完全一样。。。

貌似执行顺序会不一样，但是，现在不用太关心吧

4，ms-duplex

这个就是用来绑定输入框什么的，做到界面输入了后台就可以改，然后后台变了就可以显示到画面上。叫双向绑定比较好？

还有一些辅助的属性，比如

        <input type="text" ms-duplex="propertya" data-duplex-event="change"/>
        <input type="text" ms-duplex="propertya"/>

有data-duplex-event为change的话，就是要回车才变化

不加的那个，只要一改就变化

5，ms-css，ms-attr

这两个貌似就是用来替代css和html里原生属性的，用这个，就可以用viewmodel来绑定样式什么的

比如

Html：

<table ms-controller="tablevm" ms-attr-border="{{borderthickness}}">
    <tr>
        <td style="background-color: red" ms-css-background-color="background">Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
    <tr>
        <td>{{borderthickness}}</td>
    </tr>
</table>

viewmodel:

        avalon.define("tablevm",function(ob){
            ob.borderthickness=2,
            ob.background="blue"
        })

table的border用的就是通过ms-attr绑定到viewmodel的borderthickness上

然后第一个单元格的background-color绑定到viewmodel的background上

6，事件的绑定

就是什么onclick之类的，全都有对应的ms-xxx，用来绑定viewmodel里的方法。

例如：

<button ms-click="click"/>

然后viewmodel是这样的

        avalon.define("myvm",function (ob){
            ob.visible=false,
            ob.click=function(){
                ob.visible=!ob.visible
            }
        })