0

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

这是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 时，span 会被正确填充。但是，当我进入编辑模式时，下拉列表未设置为所选值，并且 EventType 设置为未定义。

这是我认为正在发生的事情：

  1. 用户单击 Edit 按钮并进行 ajax 调用以检索 EventType。
  2. 选择是数据绑定的。由于 EventTypes 数组为空，因此 EventType 设置为 null。
  3. ajax 调用完成并填充 EventTypes。
  4. 由于 EventType 先前设置为 null，因此选择了下拉列表中的第一项。（例如，原来的 EvenType 值丢失了。）

我想要它做什么：

  1. 用户单击 Edit 按钮并进行 ajax 调用以检索 EventType。
  2. ajax 调用完成并填充 EventTypes 数组。
  3. 选择是数据绑定的，并且选择了列表中的正确项目。
4

2 回答 2

2

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

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

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

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

于 2014-01-09T20:40:40.573 回答
1

不要将EventTypes数组设置为空，而是使用最初选择的事件类型引导它，这样在启用选择时它不会清除EventType值。一旦 ajax 从调用返回，内容无论如何都会被覆盖。IE：

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

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

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

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

于 2013-03-07T22:14:35.827 回答