Knockout.js Ajax请求返回的结果，Model不能更新。
1
悬赏园豆：5
[已解决问题]
解决于 2013-12-07 22:03
Knockout.js Ajax请求返回的结果，Model不能更新。总是返回的慢了一步，执行完ko.applyBindings(viewModel); 才执行返回结果赋值给viewModel.data，怎么办？
最佳答案
0
嗯，有两种做法：
1、在Ajax的Success方法中执行ko.applyBindings(viewModel);
2、先执行空的viewModel绑定，在使用ko属性更新数据。
我经常使用第二种方式，这样可以快速的绘制出整个页面；而页面的数据区则可以慢慢加载，甚至可以触发加载。
第二种方式要求viewModel需要更新的属性必须为ko定义的属性，即必须使用ko.observable()和ko.observableArray()来定义属性。
收获园豆：3
你好,飞扬:
第一种试过，没成功。
第二种我上面发的代码应该算是吧？ 就算后执行Ajax返回来的结果，作为更新model处理。但是也没效果。
@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中。
你好 @飞扬的尘埃:
谢谢你的答案，我用你的方法没有成功，但是我解决了我的问题。
代码：
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>。
其他回答(2)
0
F12调试一下，打个断点看一看
收获园豆：1
你好
已经断点了，我在Ajax方法的返回值部分和Ajax方法外分别alert();，结果外面的先执行。
@Andy.Zhouyou: 明白你的问题了，Ajax是异步调用的，所以你应该在Ajax success（成功时）的回调函数中再操你相应的赋值等操作
0
1 ko.applyBindings(viewModel)放到 viewModel.data 方法的外面
2 用ko.mapping.fromJSON来序列数据
收获园豆：1
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格式数据。
