Question

我现在已经多次遇到这种模式，并没有找到一种优雅的方式来处理它。我正在尝试设置一个只读和编辑模式的页面。

这是html：

<div>
    <span data-bind="text: EventType, if: !EditMode()"></span>
    <select data-bind="options: $root.EventTypes, optionsValue: 'Id', 
        optionsText: 'Name', value: EventType, if: EditMode()"></select>
</div>
<div>
    <a href="#" data-bind="click: edit">Edit</a>
</div>

和javascript：

function viewModel(eventJSON) {
    var self = this;

    self.EventType = ko.observable(eventJSON.EventType);
    self.EventTypes = ko.observableArray([]);

    self.edit = function() {
        $.getJSON("url...", function(eventTypesJSON) {
            self.EventTypes(eventTypesJSON);
        }
    }
}

我遇到了数据绑定的时间问题。调用applyBindings时，会正确填充范围。但是，当我进入编辑模式时，下拉列表未设置为所选值，并且EventType设置为undefined。

以下是我的想法：

用户单击“编辑”按钮，将进行ajax调用以进行检索 EventTypes。
选择是数据绑定。由于EventTypes数组为空，因此EventType设置为null。
完成ajax调用并填充EventTypes。
由于EventType先前已设置为null，因此会选择下拉列表中的第一项。（例如，原始的EvenType值丢失。）

我希望它做什么：

用户单击“编辑”按钮，将进行ajax调用以进行检索 EventTypes。
完成ajax调用并填充EventTypes数组。
选择是数据绑定，并且选择了列表中的正确项目。

Answer 1

我相信我今天遇到了同样的问题并找到了解决方案：

SELECT从可观察数组中获取选项的值和文本。
在视图模型的其余部分填满之后加载可观察数组的数据。
数组的选定值来自视图模型的另一个字段。

我能够通过将所选值传递给从Web服务调用加载数组的函数来使其工作。调用完成后，我将值分配回最初用作选定值的observable。这样做会强制订阅者重新绑定该字段，以便正确填充的SELECT更改所选值。

我知道这对你来说已经很晚了，可能不是你的情况，但听起来很相似，可能对其他人有帮助。

Answer 2

不是将 EventTypes 数组设置为空，而是使用最初选择的事件类型引导它，因此当select为is时，它不会清除 EventType 值启用。一旦ajax从通话中返回，内容将被覆盖。即：

self.EventTypes = ko.observableArray([eventJSON.EventType]);

或者，如果由于某种原因你不能事先初始化数组，并且由于初始事件仍然在ajax回调的范围内，只需在加载数组后重置 EventType ：

$.getJSON("url...", function(eventTypesJSON) {
   self.EventTypes(eventTypesJSON);
   self.EventType(eventJson.EventType);
}

在后者中，注意不要对初始视图模型参数和ajax回调使用相同的名称，否则后者将覆盖第一个。

在Knockout中，如何在数组填充之前延迟数据绑定？

2 个答案: