首页 新闻 赞助 找找看

Knockout.js Ajax请求返回的结果,Model不能更新。

1
悬赏园豆:5 [已解决问题] 解决于 2013-12-07 22:03

Knockout.js Ajax请求返回的结果,Model不能更新。总是返回的慢了一步,执行完ko.applyBindings(viewModel); 才执行返回结果赋值给viewModel.data,怎么办?

问题补充:

我使用的是asp.net 不是MVC,后台返回的是string的json格式

游子善心的主页 游子善心 | 初学一级 | 园豆:73
提问于:2013-12-05 22:29
< >
分享
最佳答案
0

嗯,有两种做法:

1、在Ajax的Success方法中执行ko.applyBindings(viewModel);

2、先执行空的viewModel绑定,在使用ko属性更新数据。

我经常使用第二种方式,这样可以快速的绘制出整个页面;而页面的数据区则可以慢慢加载,甚至可以触发加载。
第二种方式要求viewModel需要更新的属性必须为ko定义的属性,即必须使用ko.observable()和ko.observableArray()来定义属性。

收获园豆:3
飞扬的尘埃 | 小虾三级 |园豆:1318 | 2013-12-06 15:19

你好,飞扬:

第一种试过,没成功。

第二种我上面发的代码应该算是吧? 就算后执行Ajax返回来的结果,作为更新model处理。但是也没效果。

游子善心 | 园豆:73 (初学一级) | 2013-12-06 16:12

@Andy.Zhouyou: 不好意思刚才答复时没注意是你的代码。

看了下代码,有两个问题:
1. 你的viewModel.data是一个数组,应该使用ko.observableArray()来定义。
2. 数据加载方法Get()中,为ko属性data赋值时,由于data是一个ko数组,应该使用ko继承自数组的标准操作,而不是替换为一个全新数组。这里的data类型为ko.observableArray,而datas.d的类型为Javascript.Array。

正确的做法应该是,先清空data,然后循环读取datas.d中的数据,逐个使用数组的push方法添加到data中。

飞扬的尘埃 | 园豆:1318 (小虾三级) | 2013-12-06 16:21

你好  @飞扬的尘埃:

谢谢你的答案,我用你的方法没有成功,但是我解决了我的问题。

代码:

 var jsonModels = getDataUsingAjax();
        var viewModel = {
            data: ko.observable(jsonModels)
        };
        ko.mapping.fromJS(viewModel.data);
        ko.applyBindings(viewModel);
        function getDataUsingAjax() {
            key = "{'Key':'" + $('#tbHelpKey').val().trim() + "'}";
            var mydatas;
            $.ajax({
                type: 'POST',
                url: '/p/help.aspx/Get',
                contentType: "application/json; charset=utf-8",
                data: key,
                cache: false,
                async: false,
                success: function (datas) {
                    mydatas = datas.d;
                }
            });
            return mydatas;
        }
        function ids(id, isJq) {
            if (isJq) {
                return id == null ? "" : "#id_" + id;
            } else {
                return id == null ? "" : "id_" + id;
            }
        }
        $("#btSerach").click(function () {
            jsonModels = getDataUsingAjax();
            viewModel.data(jsonModels);
        });

使用了一个变量接收,并且设定了Ajax返回类型后,后台是直接返回的List<T>。

游子善心 | 园豆:73 (初学一级) | 2013-12-07 22:01
其他回答(2)
0

F12调试一下,打个断点看一看

收获园豆:1
junjieok | 园豆:779 (小虾三级) | 2013-12-06 08:18

你好

已经断点了,我在Ajax方法的返回值部分和Ajax方法外分别alert();,结果外面的先执行。

支持(0) 反对(0) 游子善心 | 园豆:73 (初学一级) | 2013-12-06 09:01

@Andy.Zhouyou: 明白你的问题了,Ajax是异步调用的,所以你应该在Ajax success(成功时)的回调函数中再操你相应的赋值等操作

支持(0) 反对(0) junjieok | 园豆:779 (小虾三级) | 2013-12-06 14:54
0

1 ko.applyBindings(viewModel)放到 viewModel.data 方法的外面

2 用ko.mapping.fromJSON来序列数据

收获园豆:1
|WinKi| | 园豆:669 (小虾三级) | 2013-12-06 11:17
 1  var viewModel = {
 2             data: ko.observable([{"HelpId":1,"HelpTitle":"\u589E\u52A0\u7528\u6237\u662F\u5E72\u4EC0\u4E48\u7528\u7684\uFF1F","HelpText":"\u589E\u52A0\u7528\u6237\u662F\u4E3A\u4E86\u66F4\u52A0\u65B9\u4FBF\u548C\u4EBA\u6027\u5316\u60A8\u7684\u7BA1\u7406\uFF0C\u60A8\u53EF\u4EE5\u589E\u52A0\u4E00\u4E2A\u8D26\u53F7\uFF0C\u5236\u5B9A\u8FD9\u4E2A\u8D26\u53F7\u7684\u6743\u9650\u3002"},{"HelpId":2,"HelpTitle":"\u600E\u4E48\u4FEE\u6539\u6211\u7684\u4FE1\u606F\uFF1F","HelpText":"\u6211\u7684\u4FE1\u606F\u9875\u9762\u5185\u5BB9\u65E0\u6CD5\u4FEE\u6539\uFF0C\u4F46\u662F\u8BF7\u60A8\u653E\u5FC3\uFF0C\u6211\u4EEC\u5DF2\u7ECF\u628A\u5173\u4E8E\u60A8\u7684\u6240\u6709\u4FE1\u606F\u5168\u90E8\u5728\u6570\u636E\u5E93\u52A0\u5BC6\u4FDD\u5B58\uFF0C\u60A8\u5B50\u5E10\u53F7\u7684\u65E0\u6CD5\u770B\u5230\u4F60\u7684\u94F6\u884C\u4FE1\u606F\u548C\u4E2A\u4EBA\u4FE1\u606F\u7684\u3002"},{"HelpId":3,"HelpTitle":"\u5982\u4F55\u4F53\u73B0\uFF1F","HelpText":"\u70B9\u51FB\u53F3\u4E0A\u89D2\u4E0B\u62C9\u5BFC\u822A\uFF0C\u9009\u62E9\u4F53\u73B0\u6309\u94AE\uFF0C\u6309\u7167\u8981\u6C42\u586B\u5199\u5373\u53EF\u3002"}]),
 3             ClickBt: function () {Get(); }
 4         };
 5         function Get() {
 6             key = "{'Key':'" + $('#tbHelpKey').val().trim() + "'}";
 7 
 8             $.ajax({
 9                 type: 'POST',
10                 url: '/p/help.aspx/Get',
11                 contentType: "application/json; charset=utf-8",
12                 data: key,
13                 cache: false,
14                 async: false,
15                 success: function (datas) {
16                     this.data =datas.d;
17                 }
18             })
19         }
20         function ids(id, isJq) {
21             if (isJq) {
22                 return id == null ? "" : "#id_" + id;
23             } else {
24                 return id == null ? "" : "id_" + id;
25             }
26         }
27         ko.mapping.fromJS(viewModel.data);
28         ko.applyBindings(viewModel);

这是代码,请求Ajax后台是返回string json格式数据。

支持(0) 反对(0) 游子善心 | 园豆:73 (初学一级) | 2013-12-06 13:07
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册