avalonjs 笔记

1>复选卡框和单选框

复选卡框

监控已选框的数组，即通过属性监控来判断是否全选

    <div ms-controller="test">

            <ul>

                <li>{{isAllChecked}}全选

                    <input type="checkbox" ms-attr-checked="isAllChecked" ms-click="checkAll" />

                </li>

                <li ms-repeat="arr">{{el}}<input type="checkbox" ms-attr-value="el" ms-duplex="selected" /></li>

            </ul>

        </div>

        <script src="avalon.min.js" type="text/javascript"></script>

        <script type="text/javascript">

            var vm = avalon.define({

                $id: "test",

                arr: ["1", "2", "3", "4", "5"],

                selected: ["1", "5"],

                isAllChecked: false,

                checkAll: function () {

                    if (this.checked) {

                        vm.selected = vm.arr;

                    } else {

                        vm.selected.clear();

                    }

                }

            });

            vm.isAllChecked = vm.selected.length == vm.arr.length;

            vm.selected.$watch("length", function (n) {

                vm.isAllChecked = n === vm.arr.length;

            });

        </script>

添加bool属性checked属性，将属性值绑定到"ms-duplex-checked"

    <div ms-controller="test">

            <ul>

                <li ms-repeat="arr"><input type="checkbox" ms-duplex-checked="el.checked" />{{el.sex}}</li>

            </ul>

        </div>

        <script src="avalon.min.js" type="text/javascript"></script>

        <script type="text/javascript">

            var vm = avalon.define({

                $id: "test",

                arr: [{sex:"男",checked:false},{sex:"女",checked:false}]

            });

        </script>

单选的click事件触发的时候来判断是否全选。

<!DOCTYPE html>

<html>

<head>

    <title>ms-duplex</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>

<body>

    <div ms-controller="box">

        <ul>

            <li>

                <input type="checkbox" ms-click="checkAll" ms-checked="checkAllbool" />全选</li>

            <li ms-repeat="arr">

                <input type="checkbox" ms-value="el" ms-duplex="selected" />{{el}}</li>

        </ul>

    </div>

    <script src="avalon.js"></script>

    <script>

        var vm = avalon.define({

            $id: "box",

            arr: ["1", '2', "3", "4"],

            selected: ["2", "3"],

            checkAllbool: false,

            checkAll: function () {

                if (this.checked) {

                    vm.selected = vm.arr

                } else {

                    vm.selected.clear()

                }

            }

        })

        vm.checkAllbool = vm.arr.length === vm.selected.length

        vm.selected.$watch("length", function (n) {

            vm.checkAllbool = n === vm.arr.size()

        })

    </script>

</body>

</html>

单选框

        <div ms-controller="test1">

            <ul><li ms-repeat="code">

                    <input type="checkbox" ms-attr-value="el" ms-duplex="checked" ms-click="click" />

                </li>

            </ul>

        </div>

        <script src="avalon.min.js" type="text/javascript"></script>

        <script type="text/javascript">

            var model2 = avalon.define({

                $id: "test1",

                code: ["1", "2", "3"],

                checked: [],

                click: function () {

                    model2.checked.clear();

                    model2.checked.push(this.value);

                }

            });

        </script>

2>下拉框

   <div ms-controller="test">

            {{selectedVal}}

            <select ms-each="arr" ms-duplex="selectedVal">

                <option ms-attr-value="el.val">{{el.key}}</option>

            </select>

        </div>

        <script src="avalon.min.js" type="text/javascript"></script>

        <script type="text/javascript">

            var vm = avalon.define({

                $id: "test",

                arr: [{ key: "是", val: "1" }, { key: "否", val: "0"}],

                selectedVal: "0"

            });

        </script>

3>格式化

即过滤器：它只能用于{{}}插值表达式。如果不存在参数，要求直接跟|filter，如果存在参传，则要用小括号括起，参数要有逗号

数字格式化：

number(decimals, dec_point, thousands_sep)

decimals ：可选，规定多少个小数位。

dec_point：可选，规定用作小数点的字符串（默认为 . ）。

thousands_sep：可选，规定用作千位分隔符的字符串（默认为 , ），如果设置了该参数，那么所有其他参数都是必需的。

实例：

时间格式化

转义

对类似于HTML格式的字符串进行转义，把尖括号转换为> <

4>循环绑定

el: 不一定叫这个名字，比如说ms-each-item，它就变成conitem了。默认为el。指向当前元素。
$first: 判定是否为监控数组的第一个元素
$last: 判定是否为监控数组的最后一个元素
$index: 得到当前元素的索引值
$outer: 得到外围循环的那个元素。
$remove：这是一个方法，用于移除此元素
length:获取数组对象的个数,如：obj.items.length

5>作用域绑定(ms-controller, ms-important)

ms-controller：如果当前ViewModel没有此字段就找上一级ViewModel的同名字段

ms-important：强制这个区域使用此ViewModel，不再往上查找同名属性或方法

 <div ms-controller="AAA">

            <div>

              ms-controller属性：  有color{{name}} : {{color}}</div>

            <div ms-controller="BBB">

                <div>

                   ms-controller属性： 有color {{name}} : {{color}}</div>

                <div ms-controller="CCC">

                    <div>

                     ms-controller属性：   无color {{name}} : {{color}}</div>

                </div>

                <div ms-important="DDD">

                    <div>

                     ms-important属性：   无color {{name}} : {{color}}</div>

                </div>

            </div>

        </div>

        <script type="text/javascript">

            avalon.define({

                $id: "AAA",

                name: "1_liger",

                color: "1_green"

            });

            avalon.define({

                $id: "BBB",

                name: "2_sphinx",

                color: "2_red"

            });

            avalon.define({

                $id: "CCC",

                name: "31_dragon" //不存在color

            });

            avalon.define({

                $id: "DDD",

                name: "32_sirenia" //不存在color

            });

        </script>

6>计算属性

计算属性：定义时为一个对象，并且只存在set,get两个函数或只有一个get函数。它是监控属性的高级形式，表示它的值是通过函数计算出来的，是依赖于其他属性合成出来的。

      <div ms-controller="test">

            firstName:

            <input type="text" ms-duplex="firstName" /><br />

            lastName:

            <input type="text" ms-duplex="lastName" /><br />

            fullName：<input type="text" ms-duplex="fullName" />

        </div>

        <script src="avalon.min.js" type="text/javascript"></script>

        <script type="text/javascript">

            avalon.define({

                $id: "test",

                firstName: "firstName",

                lastName: "lastName",

                fullName: {

                    set: function (val) {

                        var valArr = val.split(' ');

                        this.firstName = valArr[0];

                        if (valArr[1] == undefined) {

                            this.lastName = "";

                        } else {

                            this.lastName = val.split(' ')[1];

                        }

                    },

                    get: function () {

                        return this.firstName + " " + this.lastName;

                    }

                }

            });

        </script>

7>使用ajax获取数据

通过jQuery异步获取数据

blog_info.json

{"subject": "Blog Title","author": "张三","publish_date": "2014/3/15","comment_count": 0,"content": "<h2>这是一个测试的博客</h2><p>这是内容 1</p><p>这是内容 2</p><p>这是内容 3</p><p>这是内容 4</p>"}

<script>

var model = avalon.define("blog", function(vm){

    vm.blog = {};

});

$(function(){

    $.getJSON('blog_info.json').done(function(data){

        model.blog = data;

    });

});

</script>

数据异步提交到后台，用JSON.stringify()函数将json对象转换成字符串，特殊字符被该函数处理后发送到后台,$model去掉模型中所有的函数

        <div ms-cntroller="m">

            <input type="text" ms-duplex="obj.userId" />

            <input type="text" ms-duplex="obj.name" />

        </div>

        <script type="text/javascript">

            $(function () {

                var model = avalon.define({

                    $id: "",

                    obj: { name: "", userId: "" }

                });

                $("save").click(function () {

                    $.post("xxx.ashx", { data: JSON.stringify(model.$model.obj) }, function (data) {

                    });

                });

            });

        </script>

8>模块间通信

  <div ms-controller="test">

            vm1:

            <input type="text" ms-duplex="code" />

        </div>

        <div ms-controller="test1">

            vm2:

            <input type="text" ms-duplex="code" />

        </div>

        <script src="avalon.min.js" type="text/javascript"></script>

        <script type="text/javascript">

            var model1 = avalon.define({

                $id: "test",

                code: ""

            });

            var model2 = avalon.define({

                $id: "test1",

                code: "1",

            });

            model1.code=model2.code;

            model2.$watch("code", function (newVal,oldVal) {

                model1.code=newVal;

            });

        </script>

9>隐藏

显示绑定(ms-visible)

avalon通过ms-visible="bool"实现对某个元素显示隐藏控制，它用是style.display="none"进行隐藏。

插入绑定(ms-if)

这个功能是抄自knockout的，ms-if="bool",同样隐藏，但它是将元素移出DOM

        <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>

程序员的基础教程：菜鸟程序员

avalonjs 笔记的更多相关文章

avalonjs学习笔记之实现一个简单的查询页
官网地址:http://avalonjs.coding.me/ 因为是为了学习js,所以对样式没什么要求,先放效果图: 步骤为:初始页面-------条件查询-------编辑员工1-------保存 ...
AvalonJS学习笔记（一）
一.关于AvalonJS avalon是国内的一个MVVM框架,是从knockout发展起来的分为两个版本 avalon.js版本,支持IE6及非常老的标准浏览器.这里的标准浏览器特指W3C阵营中的 ...
avalon学习笔记
背景: 刚刚到一家新的公司,我新接手的项目采用的mvvm框架是avalon,当然我以前没有学过angular,但是用过react,所以对于这类框架应该不算陌生.但毕竟是一个新的框架,所以还是先学起来, ...
avalonjs 1.3.7发布
avalonjs 1.3.7发布又到每个月的15号了,现在avalon已经固定在每个月的15号发布新版本.这次发布又带来许多新特性,让大家写码更加轻松,借助于“操作数据即操作DOM”的核心理念与双向 ...
迷你MVVM框架 avalonjs 1.3.9发布
本次升级,avalon改进了许多内部方法,大大提升性能,并且带来异步刷新视图的新功能. ms-html内部不再使用异步 head元素中的avalon元素加入ms-skip指令重构计算属性,现在超级轻 ...
迷你MVVM框架 avalonjs 1.3.8发布
avalon1.3.8主要是在ms-repeat. ms-each. ms-with等循环绑定上做重大性能优化,其次是对一些绑定了事件的指令添加了roolback,让其CG回收更顺畅. 重构ms-re ...
迷你MVVM框架 avalonjs 1.3.7发布
又到每个月的15号了,现在avalon已经固定在每个月的15号发布新版本.这次发布又带来许多新特性,让大家写码更加轻松,借助于"操作数据即操作DOM"的核心理念与双向绑定机制,现在 ...
迷你MVVM框架 avalonjs 1.3.6发布
本版本是一次重要的升级,考虑要介绍许多东西,也有许多东西对大家有用,也发到首页上来了. 本来是没有1.36的,先把基于静态收集依赖的1.4设计出来后,发现改动太多,为了平缓升级起见,才减少了一部分新特 ...
迷你MVVM框架 avalonjs 1.3.5发布
本版本主要是修复内存泄漏问题,让其在移动端更好的运作. 修正visible BUG 详见这里修正$fire方法里的正则错误详见这里修正ms-attr BUG,在IE9-11,直接用element ...

随机推荐

VG 859使用
1.基本使用: 1) FUNC 0-9可以直接切换 FUNC A-F 需要+SHIF,切换方法为: FUNC->SHIFT->A-F 2) FORMAT->TIMING 连续按T ...
CStdioFile的Writestring无法写入中文的问题
解决UNICODE字符集下CStdioFile的Writestring无法写入中文的问题 2009-12-01 23:11 以下代码文件以CStdioFile向无法向文本中写入中文(用notepad. ...
JVM内存管理之垃圾搜集器精解（让你在垃圾搜集器的世界里耍的游刃有余）
引言在上一章我们已经探讨过hotspot上垃圾搜集器的实现,一共有六种实现六种组合.本次LZ与各位一起探讨下这六种搜集器各自的威力以及组合的威力如何. 为了方便各位的观看与对比,LZ决定采用当初写设 ...
Hibernate学习8—Hibernate 映射关系（多对多）
第二节:Hibernate 多对多映射关系实现比如学生和课程是多对多的关系: 一个学生可以选多个课程: 一个课程可以被多个学生选中,所以是多对多的关系: 1,多对多单向实现: 单向关系: 这 ...
Nginx 之：nginx.conf结构
nginx.conf文件结构如下: ..... events { ...... } http{ .... server{ .... } server{ listen 192.168.0.12:80; ...
if、while中变量的作用域问题
我们知道,函数.类会改变当前变量的作用域.if,while等分支循环结构会继承外部作用域,即外部变量对分支循环结构内部可见. 但是C语言不支持if,while等分支循环结构内部作用域对外可见,而PHP ...
《Java核心技术》 -- 读书笔记 ① - 预热
引言之前通过网上的实例自己使用了Java的一些技术及轮子快速的的“烂“造了一些小应用,但是毕竟没有认真地了解和认知Java,遂打算花一个月左右的时间来细细品味一下... 从头开始,慢慢深入!! Ja ...
USB驱动程序之USB设备驱动程序1简单编写
1.驱动编写分析 (1)usb总线驱动程序在我们接入USB设备的时候会帮我们构造一个新的usb_device.注册到总线里面来.左边这一块已经帮我们做好了,我们要做的是右边这一块.我们要构造一个usb ...
JavaScript实现排序算法总结
<script type="text/javascript" src="js/laydate.js" > //插入排序 function inser ...
makefile .phony targets
Phony Targets PHONY 目标并非实际的文件名:只是在显式请求时执行命令的名字.有两种理由需要使用PHONY 目标:避免和同名文件冲突,改善性能. 如果编写一个规则,并不产生目标文件,则 ...

avalonjs 笔记

显示绑定(ms-visible)

插入绑定(ms-if)

avalonjs 笔记的更多相关文章

随机推荐

热门专题