                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /Avalon探索之旅基础教程——复杂绑定

为什么对象数据-键值的更新，页面不能自动刷新？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>更新数据</title>
    <script src="js/avalon.js"></script>
    <script>
 var vm = avalon.define({
      $id: "test",
         data: {
              aaa: 1111,
             bbb: 2222,
             ccc: 3333
         },
 });
 setTimeout(function(){
    vm.data.aaa=444;/*能修改 可是更新不了*/
        alert(vm.data.aaa);
 },2000);
 </script>
</head>
<body ms-controller="test">
    <ul>
      <li ms-repeat="data">{{$key}}--->{{$val}}</li>
    </ul>
</body>
</html>

大傻菇

2017-01-16

源自：Avalon探索之旅基础教程——复杂绑定 3-3

关注问题我要回答

1282

操作

收起

1 回答

chen87870098
2017-02-20

vm.arr2 = vm.arr1 //报错

记住,任何时候,不能将vm中的数组或子对象取出来,再用它们赋给vm的某个数组或子对象, 因为放在vm中的数组与子对象已经变成VM了,而VM重写VM不被允许的.

并且你要保证原数据不被污染,需要使用深拷贝.

vm.arr2 = avalon.mix(true, [], arr1)
vm.obj2 = avalon.mix(true, {}, obj1)

你也可以这样,将原数据转换为纯数据就行了

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

这是avalon2.0的新特性，按这个说法，本题有两种改法

第一种，遍历vm对象的纯净模式，即,

    <ul>
              <li ms-for="(key,value) in data.$model">{{key}}--{{value}}</li>
     </ul>

第二种，将修改后的vm对象进行深复制

setTimeout(function(){
        model.data.aaa=8888;
     model.data = avalon.mix(true, {}, model.data);
        }, 2000);

望对楼主有启发

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

Avalon探索之旅基础教程——复杂绑定

参与学习 9110 人
解答问题 19 个

本课程为Avalon基础教程，带你领略前端迷您MVVM框架 Avalon

为什么对象数据-键值的更新，页面不能自动刷新？

我要回答关注问题

意见反馈帮助中心 APP下载