Question

我真的把头发拉出来了。我需要遍历一些选定的项目，包括复选框和选择列表，并编译所选模型的数组。

这是我的意思，因为checked和选择value的工作方式不同。我试图简单地将选定的选项存储在父模型中（使用selectedOption observable）。这适用于<select>，因为它保存了对模型的引用，但是使用复选框，它只会保存一个布尔值。

我尝试在模型上设置一个标记，这对于复选框很好，但我无法访问各个选项，让他们知道他们是select列表中的当前选择

所有填充复选框和下拉列表的模型属于同一类型，我只是根据某些内部属性以不同方式显示它们。

如何从复选框和选择列表中简单地收集所有选定选项的模型？

编辑：添加样本。有一个Item模型，它是Option模型的父模型。

function ItemModel(vm, item) {
    var self = this;
    self.name = item.name;
    self.description = item.description;
    self.options = ko.observableArray(mapOptions(vm, item.options) || []);
    self.selectedOption = ko.observable();
}

function OptionModel(vm, option) {
    var self = this;
    self.name = option.name;
    self.sku = option.sku || "";
    self.price = ko.observable();
}

标记/绑定（我愚蠢地认为我可以将复选框的选中值设置为模型）。如果有一个Option我使用了一个复选框，如果有多个复选框，我会使用一个选择列表。

<input type="checkbox" data-bind="checked: $parent.selectedOption, checkedValue: $data" />

<select data-bind="value: selectedOption,
options: options,
optionsText: item.name
optionsCaption: 'Choose...'">
</select>

同样，<select>按预期工作：该值是对当前所选Option的引用，这意味着我可以在应用中的其他位置使用该数据（计算客户摘要）＃39; s order）。但是，该复选框仅保存布尔值。

Answer 1

我认为解决此问题的首选方法是使用自定义绑定。这是我放在一起应该做你需要的东西。

＆＃13;

ko.bindingHandlers.valueWhenChecked = {
    init: function (element, valueAccessor) {
        if (!ko.isWritableObservable(valueAccessor().model)) {
            throw Error("model must be an observable");
        }
        ko.utils.registerEventHandler(element, "change", function () {
            var model = valueAccessor().model;
            model(element.checked ? valueAccessor().value : undefined);
        });
    },
    update: function (element, valueAccessor) {
        element.checked = valueAccessor().model() === valueAccessor().value;
    }
};

function ItemModel() {
    this.options = ko.observableArray(["test"]);
    this.selectedOption = ko.observable();
}

ko.applyBindings(new ItemModel);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>

<input type="checkbox" data-bind="valueWhenChecked: { model: selectedOption, value: options()[0] }" />

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

＆＃13;

Answer 2

如何添加isSelected成员，订阅时将selectedOption设置为第一个选项为true？然后使用isSelected作为复选框值。

KnockoutJS：收集复选框的值并一起选择数组

2 个答案: