如何使用 knockout.mapping.js 在 ajax 之后动态渲染数据？答案

【问题标题】：How to dynamic render data after ajax with knockout.mapping.js?如何使用 knockout.mapping.js 在 ajax 之后动态渲染数据？
【发布时间】：2014-08-13 04:18:59
【问题描述】：

我正在使用 knockout.js 和 knockout.mapping.js。我把数据资源改成ajax，数据不能动态刷新。

因为在实际项目中，我想在不改变js代码的情况下自定义html模块，而且数据不确定，所以数据结构复杂且动态。我想要实现的两个主要目标：

1，多级数据，所以我用了knockout.mapping，但是不行。这是一个例子：http://jsfiddle.net/8uKaL/

2，动态源，资源可能有data2, data3, ...，我可以轻松地将源引用从data2更改为data3，所以我认为我应该在html中使用<div data-bind="foreach: resources_ajax(key)" data-key="data1">之类的东西。

有什么解决办法吗？

谢谢。

【问题讨论】：

标签： knockout.js knockout-mapping-plugin

【解决方案1】：

您需要以不同的方式考虑这一点。 Knockout 是关于将模型数据绑定到 DOM，它将代表您更新 DOM。您看起来正试图从 DOM 中“调用模型”

更新了您的代码以显示示例，关键部分：

.done(function(data) {
      data.data1 = JSON.parse(data.data1); // this line just for fix fake ajax request
      self.resources_ajax(data.data1);
  });

JSFiddle：

http://jsfiddle.net/m389e/

【讨论】：

感谢您的回答。但是在我的项目中，我希望在不更改js代码的情况下自定义html模块，并且数据不确定。我想要实现的两个主要目标：1，动态源，资源可能有data2，data3，我可以轻松地将源引用从data2更改为data3，所以我想在html中使用data-key。 2、多层次，所以我用knockout.mapping。
@Fancyoung 这是您需要在问题中提供的详细信息（最好尽快），以便人们拥有所有帮助的关键

【解决方案2】：

你需要做的是先创建一个空的 data1 数组。 http://jsfiddle.net/8uKaL/4/

// this will create resources_ajax.data1 as ko.observableArray()
self.resources_ajax = ko.mapping.fromJS({data1: []});

否则，在您的原始代码中，在 ajax 之前，在您的 foreach 绑定中，ko 将看到 resources_ajax.data1 为 undefined，并且 ko 将永远不会知道您稍后在 resources_ajax 中创建了一个密钥 data1。

ko 可以“观察到”的是 resources_ajax.data1 的内容变化，而不是在 resources_ajax 对象上创建一个键 data1。

更新

但上述解决方案并不能解决您的动态用例。

这是一种让 ko 在 ajax 之后重新创建 DOM 的技术。 http://jsfiddle.net/8uKaL/6/

将DOM包装在一个可观察的标志loading中，在ajax之前，将loading设置为true，在ajax之后，将loading设置为false，这将强制ko重新解析内部绑定，并重新创建 DOM。

【讨论】：