1. Re:centos7 部署dzzoffice最新版详细教程
你好不知道为什么我搭建的时候出现了说权限不够不能访问服务器的
--gjunming
2. Re:Hadoop开启后jps显示只有jps
没用了
--温暖不过安阳
3. Re:chrome 打开本地 pdf 会自动开启下载
正解，正解，正解。赞
--许新浩
4. Re:怎样将本地文件上传到docker容器
我在： 2022年 1月 21日 20:22:57 看过本篇博客！
--努力变胖-HWP
5. Re:http接口测试工具-Advanced-REST-client
推荐试试 Apifox，好用很多。接口文档+接口调试+数据 Mock+接口测试，功能齐全。接口文档和接口开发调试使用同一个工具，接口调试完成后即可保证和接口文档定义完全一致。高效、及时、准确！...
--Liamhong

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>