Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ajax延迟加载完的json对象数据中的二级数据不能实时渲染 #389

Closed
bigqiang opened this issue May 24, 2014 · 1 comment
Closed

Comments

@bigqiang
Copy link
Contributor

实际生产环境使用的是jQuery.getJSON 调用,使用 setTimeout 的延时也复现出了同样的问题。为了容易复现问题,以下测试代码都用 setTimeout模拟问题。

<!DOCTYPE html>
<html>
    <head>
        <title>延时加载数据</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="avalon.min.js"></script>
    </head>
    <body>
        <div ms-controller="box">
            <p><h1>学校名:{{school.name}}</h1></p>
            <p>校长:{{school.uname}}</p>
            <p>成立日期:{{school.dateline*1000|date('yyyy-MM-dd')}}</p>
            <div ms-repeat="school.teacher">
                <p>教师:{{el.name}} 加入时间:{{el.joindate*1000|date('yyyy-MM-dd')}}</p>
            </div>
        </div>
        <script>
            var model = avalon.define("box", function(vm) {
                vm.school = {};
            })
            //model.school = {"id":"1","name":"育才学校","uid":"1","uname":"杜甫","dateline":"1394091197","teacher":[{"joindate":"1399411951","name":"张三"},{"joindate":"1400901806","name":"李四"}]};               
            setTimeout('(function() {model.school = {"id":"1","name":"育才学校","uid":"1","uname":"杜甫","dateline":"1394091197","teacher":[{"joindate":"1399411951","name":"张三"},{"joindate":"1400901806","name":"李四"}]};})();', 100);
            avalon.scan();
        </script>
    </body>
</html>

以上使用 setTimeout 延时给 school 赋值,会出现avalon 只解析了第一级的数据,第二级的 school.teacher 数据并没有解析渲染。倘若不使用setTimeout 延时(使用注释行代码),直接将值赋给 model.school 对象,页面会得到正确解析渲染。

又测试了另一种情况:在延迟加载的数据完成后,通过触发事件来二次获取值:

<!DOCTYPE html>
<html>
    <head>
        <title>延时加载数据</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="avalon.min.js"></script>
    </head>
    <body>
        <div ms-controller="box">
            <p><h1>学校名:{{school.name}}</h1></p>
            <p>校长:{{school.uname}}</p>
            <p>成立日期:{{school.dateline*1000|date('yyyy-MM-dd')}}</p>
            <div ms-click="click">所有教师:{{x}}</div>
        </div>
        <script>
            var model = avalon.define("box", function(vm) {
                vm.school = {};
                vm.x = "";
                vm.click = function () {
                    avalon.log(vm.school);
                    for(var i=0; i<vm.school.teacher.length; i++) {
                        vm.x += vm.school.teacher[i].name +',';
                    }
                }
            })
            setTimeout('(function() {model.school = {"id":"1","name":"育才学校","uid":"1","uname":"杜甫","dateline":"1394091197","teacher":[{"joindate":"1399411951","name":"张三"},{"joindate":"1400901806","name":"李四"}]};})();', 100);
            avalon.scan();
        </script>
    </body>
</html>

点击“所有教师”后,可正确获取所有值。

如何避免这样的情况?通过ajax延时获取值的场合较多,在作者的《avalon最佳实践》中要求数据对象最好扁平,我这边基本控制在不超过三级。现在看延时加载的数据到二级就会有问题。

@RubyLouvre
Copy link
Owner

     var arr = data.value.split(".") || []
                if (arr.length > 1) {
                    arr.pop()
                    var v = vmodels[0],n = arr[0]
                    if(v && v.hasOwnProperty(n) && v[n][subscribers]){
                        v[n][subscribers].push(data)
                    }
                }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants