avalon2框架应用注意事项

Posted 2020-08-20 水上书

　　采用avalon2框架的项目结束了，大家都第一次使用这个框架，难免踩到坑。这里是一份项目组人员归纳出来的几个注意点，分享出来希望能帮到大家。

 

　　domReady后如何扫描

$(function(){
        var vm = avalon.define({/* */});
         //如果你将vm定义在jQuery的ready方法内部,那么avalon的扫描就会失效,需要手动扫描
        avalon.scan(document.body) 
    })

　　直接提交 avalon 对象

JSON.parse(JSON.stringify(vm.data.$model))

　　不能将vm中的数组或子对象取出来,再用它们赋给vm的某个数组或子对象

vm.arr2 = vm.arr1 //报错
vm.arr2 = vm.arr1.$model //正常

　　在使用日期过滤器的时候

    <td><div>{{ el.startTime | date("yyyy-MM-dd HH:mm:ss") }}</div></td> //运用时错误

    var common = {
        dateFormatStr:"yyyy-MM-dd HH:mm:ss"
    };
    <td><div>{{ el.startTime | date(common.dateFormatStr) }}</div></td> //正常

　　我们在首次渲染页面时, 解决avalon的源码闪动问题,可以尝试这样干

.ms-controller{
         visibility: hidden;
      }

　　关闭控制台打印消息

avalon.config({
        debug: false
     })

　　checkbox 勾选问题

    var vm=avalon.define({
        showList:[] //当前显示题目列表
    });
    //重新赋值 需要先清空 不然原先的 input可能会被勾选上
    vm.showList=[];
    vm.showList = data.resultObject.items;
    //
    <div ms-for="el in @showList">
        <p width="30" class="tdborder"><input type="checkbox" class="chk_box" ms-attr="{value:el.id}" /></p>
    </div>

　　关键字问题（ie兼容）

    //ms-attr 不能有 class 等某些（未知）关键字；
    <a class="btns1 frontcls60bj10" ms-attr="{paperId:el.paperId,class:‘aa‘}"></a> // 错误

　　ms-if （ie兼容）

ms-if="el.testStatus >=1"  ||  ms-if="el.testStatus <=1" 
//最好用 ms-visible  代替 否则可能 会出现显示不了的 情况；原因未知；

　　选择框方法

$("input[type=‘checkbox‘]").not(":checked");$("input[type=‘checkbox‘]").is(":checked");

 

　　这些是avalon2结合实际开发（兼容ie8）归纳出的可行的解决方案。更加详细的资料请参阅avalon2官方文档。