Data binding Knockout.js“;选项“;绑定未在我的Durandal应用程序中更新
我正在构建一个Durandal应用程序,我当前正在处理的视图有两个Data binding Knockout.js“;选项“;绑定未在我的Durandal应用程序中更新,data-binding,knockout.js,Data Binding,Knockout.js,我正在构建一个Durandal应用程序,我当前正在处理的视图有两个框。我将它们都绑定到一个ko.observableArray,并将它们的值绑定到另一个ko.observableArray,如下所示: <select data-bind="options: dateOptions, optionsText: 'display', value: selectedDate></select> <select data-bind="options: buyerOption
框。我将它们都绑定到一个ko.observableArray
,并将它们的值绑定到另一个ko.observableArray
,如下所示:
<select data-bind="options: dateOptions, optionsText: 'display', value: selectedDate></select>
<select data-bind="options: buyerOptions, optionsText: 'display', value: slectedBuyer"></select>
这很好-渲染视图时,
为我准备好了值。但是,在那之后,我不能让任何一个
对它们各自可观测阵列的变化做出响应。在第一个
中选择一个值后,将以几乎相同的方式填充下一个
,我可以验证buyerOptions
数组是否确实已填充,但
不会更改。我还尝试通过dev工具将一个对象推送到它的数组中,向第一个
添加一个值,得到了相同的结果:数组被更新了,但UI没有改变
我在其他几个应用程序中使用过“选项”绑定,以前从未出现过这个问题,但这是我的第一个Durandal应用程序,所以我想知道我是否遗漏了什么
谢谢
更新
我在视图中添加了更多的绑定元素,但它们都不起作用,所以作曲家一定有什么奇怪的地方。不确定从何处开始查找问题(viewmodel和view在结构上非常类似于另一对工作正常的视图)。有什么建议吗?作为参考,这不是Durandal的问题-这是一个淘汰赛的问题 此外,我发现一种最有效的方法是如下所示:
<select data-bind="options: dateOptions, optionsText: 'display', value: selectedDate></select>
<select data-bind="options: buyerOptions, optionsText: 'display', value: selectedBuyer"></select>
通过在main.js中设置system.debug(true)
打开Durandal的调试模式,帮助我发现了一些代码错误,这些错误并不是通过控制台警告自动出现的。这些问题解决后,一切都正常了
经验教训-在开发时保持调试模式打开 我还不能回答我自己的问题,但我找到了答案。当我意识到视图没有被正确绑定时,我记得我可以通过在main.js中设置system.debug(true)
来打开Durandal的调试模式。打开调试信息后,我在代码中发现了几个错误,这些错误帮助我修复了所有问题。经验教训-在开发时保持调试模式打开<代码>在开发时保持调试模式打开代码>从经验中学到的东西是最好的:)
。谢谢,这是一个好建议。我已经进行了类似的设置,只是我正在使用knockout的.subscribe()
将购买选项的获取与所选日期的更改联系起来。不过,我喜欢你处理在没有选择日期的情况下提供占位符值的方式。只是想让你知道,将来,当你在代码中明确订阅一个observable或observableArray时,这是一种更长的方式来执行我在其中添加的选项。通过使计算结果依赖于可观测数据,它就是在“订阅”可观测数据。
<select data-bind="options: dateOptions, optionsText: 'display', value: selectedDate></select>
<select data-bind="options: buyerOptions, optionsText: 'display', value: selectedBuyer"></select>
var buyerOptions = ko.computed(function () {
var opts = ko.observableArray();
if (!selectedDate()) { opts.push(display: '<Select a Date>'); }
else { opts(getBuyersOptions(selectedDate().id()); }
return opts;
});