avalonjs - ie8 ms-attr-value 显示有问题

查看：116
本文介绍了avalonjs - ie8 ms-attr-value 显示有问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

问 题

1.现代浏览器（qq浏览器版本 4.1.4132.400 (64-bit)）显示的效果：

ie8显示的效果

2.代码：
html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jq.js"></script><!--版本是1.9.1-->
    <script src="avalon.js"></script><!--版本是1.5.8-->
    <style>
        .px_namebox,.option0{display:none}
    </style>
    <script>
        var showarr=[];
        var savearr=[];
        var vm=avalon.define({
            $id:'vm',
            teachersGrounp:[],
            toAjax:[],
            test:function(){
                //获取评选对象列表
                $.ajax({
                    url:'json.json',
                    type:'get',
                    dataType:'json',
                    success:function(e){
                        vm.teachersGrounp=e.bizData.data;
                    }
                });
            },
            postajax:function(){
                postdata = [];
                for(x in showarr){
                    postdata.push(x);
                }
                console.log(postdata);
                alert('['+postdata.join()+']');
            }
        });
        vm.test();
        $(function(){
            setTimeout(function(){
                $('.customName').each(function(){
                    $(this).click(function(){

                        $(this).parent().find(".px_namebox").slideToggle(200);
                    })
                });


                $(".px_namebox").each(function(){

                    var bChoose=$(this).find('.bbb').text();
                    var aChoose=$(this).find('.qkychbox');
                    var status=$(this).find('.ccc').text();
                    aChoose.each(function(){
                        if(status==1){
                            aChoose.attr("checked", true);
                            if($(this).is(':checked')){
                                var text = '';
                                showarr[$(this).val()] = bChoose;
                                for(x in showarr){
                                    if(text == '')
                                        text = showarr[x];
                                    else
                                        text = text+','+showarr[x];
                                }

                                $('#aaa').text(text);
                            }
                        }
                    });
                    aChoose.change(function(){
                        if($(this).is(':checked')){
                            var text = '';
                            showarr[$(this).val()] = bChoose;
                            //showarr.unshift($(this).val());
                            for(x in showarr){
                                if(text == '')
                                    text = showarr[x];
                                else
                                    text = text+','+showarr[x];
                            }

                            $('#aaa').text(text);
                        }else{
                            //showarr.splice(jQuery.inArray(($(this).val()),showarr),1);
                            delete showarr[$(this).val()];
                            text = '';
                            for(x in showarr){
                                if(text == '')
                                    text = showarr[x];
                                else
                                    text = text+','+showarr[x];
                            }
                            $('#aaa').text(text);
                        }
                        console.log(showarr);

                    });

                })
            },1000);

        });
    </script>
</head>
<body ms-controller="vm">
<h1>评选对象:<span id="aaa"></span></h1>
<br/>
<div ms-repeat="teachersGrounp">
    <button ms-text="el.customName" class="customName"></button>
    <div class="px_namebox" ms-repeat-ee="el.teachers">
        <input type="checkbox" class="qkychbox fang trn"    ms-attr-value="ee.uid">
        <span class="bbb" ms-text="ee.name"></span>
        <span class="ccc option0" ms-text="ee.status"></span>
    </div>
</div>
<br/>
<button style="background:white;color:red" ms-click="postajax">提交表单</button>
</body>
</html>

json:

{
  "bizData": {
    "resultMsg": "查询成功",
    "result": 1,
    "data": [
      {
        "catMode": "0013",
        "childDepts": [],
        "createDate": 0,
        "customName": "维修部",
        "deptCode": "gxgj-wxb",
        "deptSchoolMemberId": 0,
        "id": 14,
        "isolated": 0,
        "lastModDate": 1476695594724,
        "lastModDateAsDate": "2016-10-17 17:13:14",
        "parentId": 0,
        "schoolCode": "6101024000",
        "status": 0,
        "teachers": [
          {
            "name": "张娇1",
            "status": "1",
            "uid": "5d65a6f0f461444983681bfc54e4f843"
          },
          {
            "name": "张娇2",
            "status": "1",
            "uid": "c5389711135111e6bb57fa163e33daaa"
          },
          {
            "headImage": "http://qkyb.ks3-cn-center-1.ksyun.com/20160506155213.xC5B8ny8Lo.jpg",
            "name": "张娇3",
            "status": "1",
            "uid": "09e8d6d8e67011e5bed7fa163e33daaa"
          },
          {
            "name": "mac",
            "status": "0",
            "uid": "3fa116a3f19111e5bed7fa163e33daaa"
          },
          {
            "name": "math",
            "status": "0",
            "uid": "3fada83bf19111e5bed7fa163e33daaa"
          },
          {
            "headImage": "http://qkyb.ks3-cn-center-1.ksyun.com/20160817095023.aRaoJgILW0.jpg",
            "name": "陈新元",
            "status": "0",
            "uid": "14f904d0714d11e5be87fa163e33daaa"
          }
        ],
        "weixinId": 0
      },
      {
        "catMode": "001400020001",
        "childDepts": [],
        "createDate": 0,
        "customName": "美术组1",
        "deptCode": "GXGJ-美术301",
        "deptSchoolMemberId": 0,
        "id": 73,
        "isolated": 0,
        "lastModDate": 1476695594724,
        "lastModDateAsDate": "2016-10-17 17:13:14",
        "parentId": 0,
        "schoolCode": "6101024000",
        "status": 0,
        "teachers": [
          {
            "name": "max042",
            "status": "0",
            "uid": "c741dc6b135111e6bb57fa163e33daaa"
          },
          {
            "name": "max032",
            "status": "0",
            "uid": "c5739163135111e6bb57fa163e33daaa"
          }
        ],
        "weixinId": 0
      }
    ]
  },
  "rtnCode": "0000000",
  "ts": 1476695594347
}

解决方案


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="1.css" rel="stylesheet" type="text/css">
  
    <script src="//cdn.bootcss.com/avalon.js/1.5.8/avalon.js"></script>
    <style>
     
    </style>
    <script>
       var json =  {
  "bizData": {
    "resultMsg": "查询成功",
    "result": 1,
    "data": [
      {
        "catMode": "0013",
        "childDepts": [],
        "createDate": 0,
        "customName": "维修部",
        "deptCode": "gxgj-wxb",
        "deptSchoolMemberId": 0,
        "id": 14,
        "isolated": 0,
        "lastModDate": 1476695594724,
        "lastModDateAsDate": "2016-10-17 17:13:14",
        "parentId": 0,
        "schoolCode": "6101024000",
        "status": 0,
        "teachers": [
          {
            "name": "张娇",
            "status": "1",
            "uid": "5d65a6f0f461444983681bfc54e4f843"
          },
          {
            "name": "张飞",
            "status": "1",
            "uid": "c5389711135111e6bb57fa163e33daaa"
          },
          {
            "headImage": "http://qkyb.ks3-cn-center-1.ksyun.com/20160506155213.xC5B8ny8Lo.jpg",
            "name": "陈启泰",
            "status": "1",
            "uid": "09e8d6d8e67011e5bed7fa163e33daaa"
          },
          {
            "name": "樱木花道",
            "status": "0",
            "uid": "3fa116a3f19111e5bed7fa163e33daaa"
          },
          {
            "name": "弦治",
            "status": "0",
            "uid": "3fada83bf19111e5bed7fa163e33daaa"
          },
          {
            "headImage": "http://qkyb.ks3-cn-center-1.ksyun.com/20160817095023.aRaoJgILW0.jpg",
            "name": "陈新元",
            "status": "0",
            "uid": "14f904d0714d11e5be87fa163e33daaa"
          }
        ],
        "weixinId": 0
      },
      {
        "catMode": "001400020001",
        "childDepts": [],
        "createDate": 0,
        "customName": "美术组1",
        "deptCode": "GXGJ-美术301",
        "deptSchoolMemberId": 0,
        "id": 73,
        "isolated": 0,
        "lastModDate": 1476695594724,
        "lastModDateAsDate": "2016-10-17 17:13:14",
        "parentId": 0,
        "schoolCode": "6101024000",
        "status": 0,
        "teachers": [
          {
            "name": "张老师",
            "status": "0",
            "uid": "c741dc6b135111e6bb57fa163e33daaa"
          },
          {
            "name": "梁老师",
            "status": "0",
            "uid": "c5739163135111e6bb57fa163e33daaa"
          }
        ],
        "weixinId": 0
      }
    ]
  },
  "rtnCode": "0000000",
  "ts": 1476695594347
}
        var vm = avalon.define({
            $id:'vm',
            teachersGrounp:[],//这里放教师的分组,每个分组都有教师数组,里面是教师的名字,状态与uid
           
            selected: [],//这里只放教师的名字,一维数组
            test:function(){
                //
               setTimeout(function(){
                    vm.teachersGrounp.pushArray( json.bizData.data )
               })
            }
        });
        vm.test();
      
      
    </script>
</head>
<body ms-controller="vm" id="updatepx">
    <h1>选择了:<span class="selectON" ms-repeat="selected">
        {{el}}
        </span>
    </h1>
<div ms-repeat="teachersGrounp">
    <button ms-text="el.customName" class="px_groupname">
     
    </button>
    <div class="px_namebox" ms-repeat-teacher="el.teachers">
        <input type="checkbox" class="qkychbox fang trn" ms-duplex='selected' ms-attr-value='teacher.name'>
        <span class="bbb" ms-text="teacher.name"></span>
        <span class="ccc option0" ms-text="teacher.status"></span>
    </div>
</div>
</body>
</html>

更强大的版本


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="1.css" rel="stylesheet" type="text/css">

        <script src="//cdn.bootcss.com/avalon.js/1.5.8/avalon.js"></script>
        <style>

        </style>
        <script>
            var json = {
                "bizData": {
                    "resultMsg": "查询成功",
                    "result": 1,
                    "data": [
                        {
                            "catMode": "0013",
                            "childDepts": [],
                            "createDate": 0,
                            "customName": "维修部",
                            "deptCode": "gxgj-wxb",
                            "deptSchoolMemberId": 0,
                            "id": 14,
                            "isolated": 0,
                            "lastModDate": 1476695594724,
                            "lastModDateAsDate": "2016-10-17 17:13:14",
                            "parentId": 0,
                            "schoolCode": "6101024000",
                            "status": 0,
                            "teachers": [
                                {
                                    "name": "张娇",
                                    "status": "1",
                                    "uid": "5d65a6f0try83681bfc54e4f843"
                                },
                                {
                                    "name": "张飞",
                                    "status": "1",
                                    "uid": "c5389711135111e6bb57fa163e33daaa"
                                },
                                {
                                    "headImage": "http://qkyb.ks3-cn-center-1.ksyun.com/20160506155213.xC5B8ny8Lo.jpg",
                                    "name": "陈启泰",
                                    "status": "1",
                                    "uid": "09e8d6d8eret7fa163e33uytaaa"
                                },
                                {
                                    "name": "樱木花道",
                                    "status": "0",
                                    "uid": "3fa116a3fertretbed7fa163e33daaa"
                                },
                                {
                                    "name": "弦治",
                                    "status": "0",
                                    "uid": "3fada83bf1sdfdsfe5bed7fa163e33daaa"
                                },
                                {
                                    "headImage": "http://qkyb.ks3-cn-center-1.ksyun.com/20160817095023.aRaoJgILW0.jpg",
                                    "name": "陈新元",
                                    "status": "0",
                                    "uid": "14f904d0714d455434533daaa"
                                }
                            ],
                            "weixinId": 0
                        },
                        {
                            "catMode": "001400020001",
                            "childDepts": [],
                            "createDate": 0,
                            "customName": "美术组1",
                            "deptCode": "GXGJ-美术301",
                            "deptSchoolMemberId": 0,
                            "id": 73,
                            "isolated": 0,
                            "lastModDate": 1476695594724,
                            "lastModDateAsDate": "2016-10-17 17:13:14",
                            "parentId": 0,
                            "schoolCode": "6101024000",
                            "status": 0,
                            "teachers": [
                                {
                                    "name": "张老师",
                                    "status": "0",
                                    "uid": "c741dc6b13rtyrtfa163e33daaa"
                                },
                                {
                                    "name": "梁老师",
                                    "status": "0",
                                    "uid": "c5739ghjhg5111e6bb57fa163e33daaa"
                                }
                            ],
                            "weixinId": 0
                        }
                    ]
                },
                "rtnCode": "0000000",
                "ts": 1476695594347
            }

            var vm = avalon.define({
                $id: 'vm',
                //这里放教师的分组,每个分组都有教师数组,里面是教师的名字,状态与uid
                teachersGrounp: [],
                //使用$name不可监控对象来保存所有人的名字
                $names: {},
                //这里只放教师的名字,一维数组
                selected: [],
                //根据uid显示名字
                showName: function (uid) {
                    return vm.$names[uid]
                },
                 //根据ID将人员放回原位置上,并从selected数组移除
                restore: function(uid){
                  
                    var gid, data
                    try{
                        json.bizData.data.forEach(function (el) {
                            gid = el.id
                            el.teachers.forEach(function (teacher) {
                                if(teacher.uid === uid){
                                    data = avalon.mix(true, {}, teacher)                            //强制中断循环，没有必须继续匹配了
                                    throw 'error'
                                }
                            })
                        })
                    }catch(e){
                        
                    }
                    vm.teachersGrounp.forEach(function(el){
                        if(el.id === gid){
                            el.teachers.push(data)
                        }
                    })
                    vm.selected.remove(uid)
                },
                //将数据显示出来,注意,所有数组必须深复制,防止影响数据源,并在这里构建$name
                show: function () {
                    //这个setTimeout是用来模拟异步的AJAX请求
                    setTimeout(function () {

                        json.bizData.data.forEach(function (el) {
                            el.teachers.forEach(function (elem) {
                                vm.$names[elem.uid] = elem.name
                            })
                        })
                        vm.teachersGrounp.pushArray(avalon.mix(true, [], json.bizData.data))
                    })
                }
            });
            vm.$watch('selected.length', function () {
                //如果selected的长度发生变化,遍历分组
                vm.teachersGrounp.forEach(function (el) {
                    el.teachers.removeAll(function (teacher) {
                        //如果uid位于selected数组之中
                        return vm.selected.indexOf(teacher.uid) > -1
                    })
                })
            })
            vm.show();


        </script>
    </head>
    <body ms-controller="vm" id="updatepx">
        <h1>选择了:<span class="selectON" ms-repeat="selected" ms-click="restore(el)">
                {{showName(el)}}
            </span>
        </h1>
        <div ms-repeat="teachersGrounp">
            <button ms-text="el.customName" class="px_groupname">

            </button>
            <div class="px_namebox" ms-repeat-teacher="el.teachers">
                <input type="checkbox" class="qkychbox fang trn" ms-duplex='selected' ms-attr-value='teacher.uid'>
                <span class="bbb" ms-text="teacher.name"></span>
                <span class="ccc option0" ms-text="teacher.status"></span>
            </div>
        </div>
    </body>
</html>

动画效果

ms-click="restore($event, el)"

restore方法里面改成

restore: function(e, uid){
   avalon(e.target).addClass('ani')//通过类名实现动画
   setTimeout(function(){
    //800ms动画后执行这里的逻辑
    var gid, data
    try{
        json.bizData.data.forEach(function (el) {
            gid = el.id
            el.teachers.forEach(function (teacher) {
                if(teacher.uid === uid){
                    data = avalon.mix(true, {}, teacher)                            //强制中断循环，没有必须继续匹配了
                    throw 'error'
                }
            })
        })
    }catch(e){
        
    }
    vm.teachersGrounp.forEach(function(el){
        if(el.id === gid){
            el.teachers.push(data)
        }
    })
    vm.selected.remove(uid)
                    
   },800)
}

这篇关于avalonjs - ie8 ms-attr-value 显示有问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆