挖空:根据另一个选择下拉列表的值添加/删除选择下拉列表

Question

我正在使用 knockout 来构建以下情况的用户界面：- 我有一系列物品。每个项目都有一个项目详细信息数组。- 项目详细信息可以是以下两种类型之一："A 型"或"B 型"。- 如果项目详细信息的类型为 A，则可以具有以下两种子类型之一："子类型 A-1"和"子类型 A-2"。- 如果项目详细信息的类型为 B，则它没有子类型。

我的小提琴

我有两个问题/问题：

我想根据"详细信息类型"下拉列表
1. 的值添加/删除"详细信息子类型"下拉列表。例如，如果用户选择"类型 B"，我想删除"详细信息子类型"下拉列表。我还想将基础"子类型"属性的值设置为 null。我玩了if绑定，但无济于事
2. 在视图模型的 addItemDetail 方法中，如何添加新的项目详细信息？

Answer 1

项目详细信息是一个可观察数组，其中包含包含常规属性（而非可观察量）的常规对象。你已经创建了一个"pm.itemDetail"构造函数，那么为什么不使用它呢？

pm.Item = function(name, itemDetails) {
    // ...    
    var details = [];
    for (var i = 0; i < itemDetails.length; i++) {
        details.push( new pm.ItemDetail(itemDetails[i]) );
    }
    self.itemDetails = ko.observableArray(details);
};

我已经更新了下午。项目详细信息功能有点：

pm.ItemDetail = function(data) {
    var self = this;
    self.name = ko.observable(data.name);
    self.type = ko.observable(data.type);
    self.subtype = ko.observable(data.subtype);
};

现在您可以使用"可见"绑定（"if"绑定隐藏 DOM 节点的内容，而不是节点本身）：

data-bind="visible: type() == 1, ..."

---

要添加新的项目详细信息，只需创建"pm.ItemDetail"并将其推送到当前选定项的 itemDetails 数组：

addItemDetail = function(item) {
    selectedItem().itemDetails.push(new pm.ItemDetail({
        name: "Please enter a name",
        type: 1,
        subtype: 1
    }));
};

http://jsfiddle.net/XscRT/6/

Answer 2

1）你几乎拥有了它。您的 if 表达式中缺少 （）。

2）您可以像这样添加项目详细信息...

addItemDetail = function(item) {
    // what should be here to add a new detail to an item?
    selectedItem().itemDetails.push(new pm.ItemDetail());
};

我还修改了通过新项目添加项目详细信息的方式。请注意下面小提琴中的 for 循环。

这把小提琴具有上述所有内容。

http://jsfiddle.net/johnpapa/FWFPV/