javascript - 将从服务器接收到的对象转换为具有可观察属性的对象

Question

我对看似简单的想法有疑问。

我正在尝试从服务器提供的数据动态创建 ko.observable()。

服务器正在向我发送一个 ~240 值的 JSON 数组。当我将它们放入在线表单时，我想为每个人创建一个可观察的对象。

第一次尝试

function AppViewModel() {

  var self = this;

  var data = {};

  $.getJSON("/record/20001", function(data) {
    $.each(data, function(i, val) {
      self.data[i] = ko.observable(val);
    });
  });


  self.test = 5;

  self.test2 = ko.observable(69);


}

vm = new AppViewModel();
ko.applyBindings(vm);

这样我就无法访问任何数据。

第二次尝试成功了

function AppViewModel() {

    var self = this;
    self.abnorm_comment = ko.observable();
    self.abnorm_test1 = ko.observable();
    self.abo_sys_spec = ko.observable();
    self.access_location = ko.observable();
    self.ace_inhibit = ko.observable();

    /* 
    A myriad of line like these, written by hand
    */

    self.xray_other = ko.observable();


    $.getJSON("/record/20001", function (data) {
        $.each(data, function (i, val) {
            self[i](val);
        });
    });

    self.test = 5;

    self.test2 = ko.observable(69);


}

我正在尝试做什么

function AppViewModel() {

    var self = this;

    var data = {};


    $.getJSON("/record/20001", function (data) {
        $.each(data, function (i, val) {
            self.data[i] = ko.observable(val);
        });
    });

}

并像这样访问它:

<input type="text" data-bind="value: data.case_id">

第一次尝试时，我的 View 模型中没有数据。如果我在 Chrome 控制台中提取 vm 变量，它确实有数据。

我在这里做错了什么吗？对于如此多的可观察量，第二种工作方式看起来不太好。

如果我遗漏了一些明显的内容，请告诉我

个人解决方案

最终我在应用绑定(bind)和 AJAX 服务器请求之间遇到了竞争条件。我最终也按照@JotaBe 的推荐使用了该插件

Answer 1

这在过去对我来说是可靠的:

jsonToObservable = function (obj, data) {

    for (var p in data) {
        var temp = data[p];

        obj[p] = ko.observable(temp);

    }
};