Question

我在另一个列表中有一个下拉列表，可以添加项目，然后用户可以通过更改下拉列表来更改他们添加的项目。

这适用于此处，当我添加项目时，选择下拉列表中的正确值：

<tbody data-bind="foreach: items">
<tr>
    <td>
        <select data-bind="
            options: materials,
            optionsValue: 'MaterialName',
            optionsText: function(item) {
                return item.MaterialGroup + ': ' + item.MaterialName;
            },
            optionsCaption: '[Choose a Material]',
            value : selectedMaterial(),
            attr: { name: 'MaterialOrderLine[' + $index() + '].MaterialName' }"></select> 
    </td>
    ...

目前所有这些都很有效。但是现在我的挑战是我现在需要在下拉列表的选定值更改时添加对此下拉列表的订阅以执行其他操作，我认为我可以很容易地执行此操作，但此处的订阅不起作用：

function MaterialItem(material, qty) {

    var self = this;
    self.materials = ko.observableArray([]);

    //this populates the dropdown lists inside the grid
    $.when(
        $.ajax({
            url: '...',
            dataType: 'JSON',
            type: 'POST',
            data: JSON.stringify({... }),
            contentType: 'application/json; charset=utf-8'
        })
    ).done(function (result) {
        for (var i = 0; i < result.length; i++) {
            self.materials.push(result[i]);
        }
    });

    self.material = material;
    self.qty = qty;
    self.selectedMaterial =  ko.observable(material); //used to hold selected value on mat'l dropdown

    this.selectedMaterial.subscribe(function (newValue) {
        alert('f');
    }.bind(self));

}

此订阅根本不起作用。但是，我可以通过更改HTML来使其工作：来自“value：selectedMaterial（）” to“value：selectedMaterial”

但是当我进行更改时，下拉列表中的值不再正确设置（默认为选择列表中的第一项）。

Answer 1

我认为是Knockout value not being set in function

的副本

选项列表在值observable之后设置，因此当绑定select时，selectedMaterial observable已经被重置。

其他一些事情......

不要在循环中调用observableArray的推送，您将导致所有绑定重新启动每个操作。可以调用splice或只设置数组值。
您不需要使用bind（self）。所有这一切都是将函数内部的环境“this”设置为引用“self”。你已经在一个变量中捕获了self，所以我们就这样了。

.done(function (result) {
    self.materials(result);
    self.selectedMaterial(self.material);
}

KnockoutJS选项列出了订阅价值

1 个答案: