Knockout.js Knockoutjs-新实例化VM的复杂对象绑定

我对柯有一个特别棘手的问题。我会试着解释一些例子

首先，这里是我试图呈现的html垃圾。foreach变量“Appliances”是一个数组，是viewModel的一个属性。选项数据也是视图模型的属性数组。这里的名称是ApplianceTypes

 <table>   
 <tbody data-bind="foreach: Appliances">
        <tr>
             <td>
                  <select data-bind="options: $root.ApplianceTypes, value: $data.ApplianceType.Id, optionsValue: 'Id', optionsText: 'ApplianceTypeDesc'">
                  </select>
             </td>
             <td>
                  <input data-bind="value: UnitNumber" />
             </td>                
        </tr>
 </tbody>
 </table>

所以，这里还没有什么大问题。我得到一个UI，每个设备有一行。每行都是一个类型下拉列表，其中填充了设备类型。如果我只是编辑我所拥有的，那么viewModel.Appliances[I].ApplianceType.Id会更新，生活也会很好。如果我尝试向applianceType数组添加新内容，则applianceType.Id不会得到更新。下面是代码：

function ApplianceTypeViewModel() {
var self = this;
self.Id = ko.observable("5");
self.ApplianceTypeDesc = ko.observable("");
};

function ApplianceViewModel(applianceType) {
    var self = this;
    self.Id = ko.observable("-1");
    self.ApplianceType = ko.observable(applianceType);
    self.ServiceApplianceQuantity:"1"
};

viewModel.AddAppliance = function () {
    viewModel.Appliances.push(new ApplianceViewModel(new ApplianceTypeViewModel()));
};

最终，将applianceType从数组复制到设备[i].applianceType上会很好，但老实说，我只是想让Id在那里更新。剩下的我可以在服务器上完成

如果数据存在，则每次都会更改。当我使用AddAppliance新建它时，数据不会更改

---

谢谢大家

您的

ApplianceViewModel

中的

ApplianceType

是可观察的。但是，select元素的

值

绑定无效

value: $data.ApplianceType.Id

您希望获得可观察对象值的

Id

属性，而不是从可观察对象本身。您应将该部分绑定更改为：

value: ApplianceType().Id

或者更好的选择是使

ApplianceType

不可见。通常，您应该创建要观察的特定值，而不是其他视图模型

function ApplianceViewModel(applianceTypeViewModel) {
    var self = this;

    // ...
    self.ApplianceType = applianceTypeViewModel; // just assign the view model
};

只需在数据绑定中删除“Id”部分，您的

设备[i]。ApplianceType

将正确填充所选设备类型

value:$data.ApplianceType.Id

应该是

value:$data.ApplianceType

查看此JSFIDLE以了解

value

绑定如何工作的示例

你的代码被修改成在这里工作

knockout的设计方式

options

可以是任意javascript对象的数组，而不仅仅是字符串，所选项目（值

将是这些对象之一。这就是为什么要使用
选项text
绑定来指定选项的显示文本

function ApplianceViewModel(applianceTypeViewModel) {
    var self = this;

    // ...
    self.ApplianceType = applianceTypeViewModel; // just assign the view model
};