下面是我编写的第一段knockoutjs代码。在下面的代码中,我有两个列表框。第一个在页面加载后填充并且工作正常。接下来我想做的是,当用户从 cmbDataSets 列表框中选择一个项目时,我想进行第二次 ajax 调用来填充我的 View 模型的“instruments”属性。稍后,当用户选择一种乐器时,我想再次调用来获取将在网格中显示的数据(使用 slickgrid.js)。
现在,我想了解实现此目标的方法或最佳实践是什么。我想我可以简单地在第一个列表框中添加正常的 html/javascript 选择更改事件处理程序来完成此操作...但我不确定这是否是推荐的方式(我知道这不是 MVVM 方式)。我觉得既然 selectedDataSet 是一个可观察的,我也应该能够将其链接到事件处理程序......不是吗?我的问题是如何?我可以在我的 View 模型上定义 onSelectedDataSetChange 方法吗?如果可以,我如何将其“ Hook ”到 cmbDataSets 控件的实际选择更改中?
<div class="container">
<label for="cmbDataSets">Select list:</label>
<select id="cmbDataSets" data-bind="options: dataSets, optionsText:'descr', value:selectedDataSet, optionsCaption:'Choose' " class="form-control"></select>
<label for="cmbInstruments">Select instrument:</label>
<select id="cmbInstruments" data-bind="options: instruments, optionsText:'intrument', value:selectedInstrument, optionsCaption:'Choose' " class="form-control"></select>
</div>
<script type="text/javascript">
$(document).ready(function () {
var viewModel = {
dataSets: ko.observableArray(),
instruments: ko.observableArray(),
selectedDataSet: ko.observable(),
selectedInstrument: ko.observable()
}
$.ajax({
url: '/ds/sets',
type: "GET",
dataType: "json",
success: function (data) {
debugger;
console.log(data);
viewModel.dataSets(data);
}
});
ko.applyBindings(viewModel);
});
</script>
最佳答案
您可以订阅第一个可观察的 selectedOption 框,并在其更改时进行调用。
selectedOption = ko.observable();
selectedOption.subscribe(function (newValue) {
secondBoxSource(ajaxCallFunction(newValue));
});
其中 ajaxCallFunction() 是用于获取第二个框数据的函数,newValue 是从第一个框中新选择的值。
关于javascript - KnockoutJS - 根据第一个组合框中选择的值填充第二个组合框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29163230/