Question

我一直在关注knockmeout上的简单编辑器模式，一切都按预期工作，直到我开始使用嵌套对象。

基本上当我选择一个项目时，我在我的viewmodel上设置了2个属性。 selectedItem属性和editable属性。这是我可以更改的可编辑属性。如果用户接受更改，则更新所选项目。

如果我有一个扁平的对象，这在我的代码中工作正常。但是，当我有嵌套对象时，子对象数据在分配给editable属性时不正确。

我应该看到：

"Selected": {
    "Id": 1,
    "Name": "user 1",
    "Role": {
      "Id": 2,
      "RoleName": "IT Support"
    }
  },
  "Editable": {
    "Id": 1,
    "Name": "user 1",
    "Role": {
      "Id": 2,
      "RoleName": "IT Support"
    }

但是我得到了：

"Selected": {
    "Id": 2,
    "Name": "user 1",
    "Role": {
      "Id": 3,
      "RoleName": "IT Procurement"
    }
  },
  "Editable": {
    "Id": 2,
    "Name": "user 1",
    "Role": {
      "Id": 2,
      "RoleName": "IT Support"
    }

如果我记录传递给selectItem方法的详细信息对象，我可以看到数据是正确的。分配给可编辑属性时，它似乎不正确。

如果不是很清楚，请道歉。这是我fiddle

的链接

Answer 1

您遇到的问题来自编辑器中select的绑定。 Knockout确保您当前的值是有效选择，或者将其设置为第一个条目。在您的情况下，您的可编辑副本与EmployeeRoles数组中的项目没有相同的引用。即使它们看起来相同，但它们并不相同，因为它们不是相同的参考。

一个简单的解决办法可能是做一些事情：

self.SelectEmployee = function(e){
    self.Selected(e);
    var copy = ko.toJS(e);
    copy.Role = e.Role(); //get the actual reference
    self.Editable(new Employee(copy));
    self.isOpen(true);
};

因此，我们仍然使用ko.toJS制作干净的副本，但随后将实际引用粘贴到副本上的Role。

更新了示例：http://jsfiddle.net/rniemeyer/rVYrB/

您的示例是通过弹出对话框使用此模式的一个很好的示例。

在嵌套中使用嵌套对象的简单编辑器模式

1 个答案: