Knockout JS 没有设置所有成员可观察

Question

我想做的是从服务器获取数据，然后将其全部放入可观察对象中，然后使所有属性都可观察。我面临的问题是它不会使我的所有属性都可观察，我需要它们全部都可观察，因为有时取决于数据，它使某些属性可观察，有时则不然。

var viewModel = this;
viewModel.Model = ko.observable();

viewModel.SetModel = function (data) {
viewModel.Model(ko.mapping.fromJS(data));
}

我从服务器接收到的数据是这样的，例如：normaldata,items（这是一个元素数量未知的数组）。因此，如果我尝试访问 viewModel.Model().Items[0]().Layer() 之类的数据，我有时会将 Layer 作为函数，有时它是具有可观察性的普通元素 elements.I 希望 Items 中的所有对象都将 Layer 作为函数。

服务器数据示例：姓名："test" 物品：[图层[ID: 132]] 在此示例中，Name、Items 和 ID 是可观察的，但 Layer 不是。

Fiddle 示例： jsfiddle.net/98dv11yz/3 所以问题是有时图层为空导致 ko 使属性可观察但有时属性具有 id 并且 ko 仅使子元素可观察。问题是我在代码中有 if 并且我希望它是一个函数所以我总是可以将它称为 layer() 因为现在它有时是 layer 或 layer()

Answer 1

对正在发生的事情的解释：

当 ko.mapping 插件在您的输入中遇到对象时，它将使对象的属性可观察，而不是属性本身。

例如：

var myVM = ko.mapping.fromJS({
  name: "Foo",
  myObject: {
    bar: "Baz"
  }
});

将归结为：

var myVM = {
  name: ko.observable("Foo"),
  myObject: {
    bar: ko.observable("Baz")
  }
}

和不到：

var myVM = {
  name: ko.observable("Foo"),
  myObject: ko.observable({
    bar: ko.observable("Baz")
  })
}

您的数据结构的问题是 myObject 有时是 null，有时是一个对象。在这个例子中，第一个将被视为 name 属性，后者将被视为 myObject prop.

我的建议：

首先：我建议仅使用ko.mapping.fromJS方法如果你有一个良好的记录和统一的数据结构，而不是大型数据集有许多层次和复杂性。有时，创建在其构造函数中具有自己的映射逻辑的 slim 视图模型会更容易。

如果您不想更改数据结构并想继续使用 ko.mapping，则必须在客户端更改此部分：

Items: [
  { layer: {id: "0.2"} },
  { layer: null}
]

您必须决定要实现的目标。视图模型是否应该用 null 层删除项目？或者你想渲染它并能够更新它吗？以下是如何在创建视图模型之前 "correct" 您的数据的示例：

var serverData = {
  Name: "Example Name",
  Id: "0",
  Items: [
    {layer: {id: "0.2"} },
    {layer: null}
  ]
};

var correctedData = (function() {
  var copy = JSON.parse(JSON.stringify(serverData));

  // If you want to be able to render the null item:
  copy.Items = copy.Items.map(function(item) {
    return item.layer ? item : { layer: { id: "unknown" } };
  });

  // If you don't want it in there:
  copy.Items = copy.Items.filter(function(item) {
    return item.layer;
  });

  return copy;
}());

这种解决方案是否可以接受取决于您在实际生活中使用的复杂程度。如果数据有更多的复杂性和交互性，我建议将项目映射到它们自己的视图模型，这些视图模型处理缺失的属性等等...

Knockout JS 没有设置所有成员可观察

Knockout JS not setting all members observable

javascript

mapping

knockout.js