Knockout.js“选项”绑定未在我的 Durandal 应用程序中更新答案

【问题标题】：Knockout.js "options" binding not updating in my Durandal appKnockout.js“选项”绑定未在我的 Durandal 应用程序中更新
【发布时间】：2013-06-20 21:18:17
【问题描述】：

我正在构建一个 Durandal 应用，我目前正在处理的视图有两个 <select> 框。我将它们都绑定到ko.observableArray，并将它们的值绑定到另一个ko.observable，如下所示：

<select data-bind="options: dateOptions, optionsText: 'display', value: selectedDate></select>
<select data-bind="options: buyerOptions, optionsText: 'display', value: slectedBuyer"></select>

第二个取决于第一个的值，所以我在不同的时间填充它们。首先，我在activate() 调用期间查询我的数据源，然后在请求返回的承诺得到解决时将数据传递给一个单独的方法来填充数组数据（以简单的 JS 对象的形式）：

var populateDateOptions = function(dates) {
    $.each(dates, function() {
        dateOptions.push({
            display: dateToString(this.pbDateOpt),
            date: this.pbDateOpt
        });
    });
};

这很好——<select> 在呈现视图时为我准备好了值。但是，在那之后，我无法让<select> 响应它们各自可观察数组的变化。一旦在第一个<select> 中选择了一个值，下一个<select> 就会以几乎相同的方式填充，我可以验证buyerOptions 数组确实正在填充，但<select> 不会改变。我还尝试通过开发工具将一个对象推送到其数组中，为第一个 <select> 添加一个值，并得到相同的结果：数组已更新，但 UI 没有更改。

我在其他几个应用程序中使用过“选项”绑定，以前从未遇到过这个问题，但这是我的第一个 Durandal 应用程序，所以我想知道我是否缺少某些东西？

谢谢！

更新我在视图中添加了一些更多的绑定元素，但它们都不起作用，所以作曲家一定有一些奇怪的事情发生。不知道从哪里开始寻找问题（视图模型和视图在结构上与另一对工作正常的视图非常相似）。有什么建议吗？

【问题讨论】：

我还不能回答我自己的问题，但我想通了。一旦我意识到视图没有正确绑定，我记得我可以通过在 main.js 中设置 system.debug(true) 来打开 Durandal 的调试模式。打开调试信息后，我在代码中发现了一些错误，这些错误帮助我修复了所有问题。经验教训 - 在开发时保持调试模式！
leave debug mode on when you're in development! 经验中学到的就是最好的:)。

标签： data-binding knockout.js

【解决方案1】：

仅供参考，这不是 Durandal 问题 - 这是 Knockout 问题。

另外，我发现最有效的一种方法是采用与您相同的方式 -

<select data-bind="options: dateOptions, optionsText: 'display', value: selectedDate></select>
<select data-bind="options: buyerOptions, optionsText: 'display', value: selectedBuyer"></select>

但在您的视图模型中，让 buyOptions 直接依赖于 dateOptions，就像这样 -

var buyerOptions = ko.computed(function () {
    var opts = ko.observableArray();
    if (!selectedDate()) { opts.push(display: '<Select a Date>'); }
    else { opts(getBuyersOptions(selectedDate().id()); }
    return opts;
});

这样，如果您的 selectedDate observable 是空的（尚未选择一个），则不会出现buyerOptions，但是如果您选择一个日期，它将根据 selectedDate 中的某些值（例如 Id）填充它。 It will also automatically update whenever a new date is chosen, without you having to explicitly tell it to with JavaScript or w/e

【讨论】：

谢谢，这是个好建议。我已经进行了类似的设置，只是我使用淘汰赛的.subscribe() 将buyerOptions 的获取与所选日期的更改联系起来。不过，如果没有选择日期，我喜欢你处理提供占位符值的方式。
只是让您知道将来，当您在代码中显式订阅 observable 或 observableArray 时，执行我在其中放置的选项的方法更长。通过使计算依赖于可观察对象，它“订阅”了可观察对象。

【解决方案2】：

通过在 main.js 中设置 system.debug(true) 来打开 Durandal 的调试模式，帮助我发现了一些没有通过控制台警告出现的代码错误。解决这些问题后，一切都绑定/正常工作。

经验教训 - 在开发过程中保持调试模式！

【讨论】：