Question

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

My fiddle

我有两个问题/问题：

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

Answer 1

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/

Answer 2

项详细信息是一个可观察数组，其中包含包含常规属性的常规对象，而不是可观察对象。你已经创建了一个“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函数：

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/

淘汰：根据另一个选择下拉列表的值添加/删除选择下拉列表

2 个答案: