Question

我正在尝试创建一组下拉列表，以便可以动态地向该集添加新的下拉列表。一个例子是订购比萨饼的表格，其中有一组用于浇头的选择标签。我们不知道用户想要多少浇头，因此我们将从一个浇头开始，并在用户选择第一个浇头时动态添加新选择。

我遇到的问题是select上的值绑定无法正常工作。如果最初设置了value对象，则select将绑定到它，但任何更改都不会更新VM中的observable。

我尝试了所有不同类型的方法，基于$ data绑定，使用别名，使用不同的上下文走回到对象，并使用虚拟元素将上下文绑定在不同的地方等。

这个例子有点人为，因为会有其他代码涉及实际添加更多选择等，但它确实复制了我看到的问题。只需选择几个浇头，然后单击“检查值”按钮，即可找到未在VM中设置的选择。

<!-- ko foreach: {data: selectedPropertyNames} -->
<select data-bind="options:$root.nameOptions, value: $data, optionsCaption:'Pick One'"></select>
<!-- /ko -->
<button type="button" data-bind="click: checkValues">Check Values</button>

function ViewModel() {
    var self = this;
    this.nameOptions = ko.observableArray([]);
    this.selectedPropertyNames = ko.observableArray([]);

    var firstSelection = ko.observable(null);
    this.selectedPropertyNames.push(firstSelection);

    var secondSelection = ko.observable('Beef');
    this.selectedPropertyNames.push(secondSelection);

    this.nameOptions(['Pepperoni', 'Beef', 'Pineapple', 'Green Peppers', 'Extra Cheese']);

    this.checkValues = function () {
        for (var i = 0; i < self.selectedPropertyNames().length; i++) {
            console.log(self.selectedPropertyNames()[i]());
        }
    }
};

ko.applyBindings(new ViewModel());

Answer 1

问题在于foreach数据绑定。

<!-- ko foreach: {data: selectedPropertyNames} -->
<select data-bind="options:$root.nameOptions, value: $data, optionsCaption:'Pick One'"></select>
<!-- /ko -->

你是$ data的绑定值，它是变量的内容，而不是变量引用本身。如果您将绑定更改为

<select data-bind="options:$root.nameOptions, value: $root.selectedPropertyNames()[$index()], optionsCaption: 'Pick One'"></select>

然后它会正常工作。更新的小提琴位于http://jsfiddle.net/newuserjs/4o80aebr/

Knockout.js在foreach绑定中绑定选择选项和值

1 个答案: