KnockoutJS - 根据第一个组合框中选择的值填充第二个组合框

Question

下面是我写的第一段knockoutjs代码。在下面的代码中，我有两个列表框。第一个在页面加载并正常工作后填充。我接下来要做的是，当用户从 cmbDataSets 列表框中选择一个项目时，我想进行第二次 ajax 调用以填充我的视图模型的 'instruments' 属性。稍后当用户选择一种仪器时，我想再次调用以获取我将在网格中显示的数据（使用 slickgrid.js）。

现在，我想了解实现此目的的方法或最佳实践是什么。我想我可以简单地在第一个列表框中添加正常的 html/javascript 选择更改事件处理程序来完成此...但我不确定这是否是推荐的方式（我知道这不是 MVVM 方式）。我觉得既然 selectedDataSet 是一个可观察的对象，我也应该能够将它链接到一个事件处理程序……不是吗？我的问题是如何？我可以在我的视图模型上定义一个 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>

Answer 1

您可以订阅第一个 boxes selectedOption observable 并在它发生变化时进行调用。

selectedOption = ko.observable();
   selectedOption.subscribe(function (newValue) {
            secondBoxSource(ajaxCallFunction(newValue));
        });

其中 ajaxCallFunction() 是您用来为第二个框获取数据的函数，newValue 是从第一个框中新选择的值。

Answer 2

麦克。

检查此代码，用于在视图中设置更改事件：

<select data-bind="event: { change: selectionChanged }"></select>

然后是 ViewModel 中的属性：

selectionChanged: function(event) { }

这就是您要搜索的内容吗？除此之外，我有一个小建议 - SelectedDataSet 和 selectedInstrument 也可以是可观察数组。区别在于您将使用的不是 'value' 出价，而是“selectedOptions”出价。当您有多个选择时，这将对您有所帮助，但我认为即使是单个选择，它也是一个更好的选择。

KnockoutJS - 根据第一个组合框中选择的值填充第二个组合框

KnockoutJS - populating second combobox based on value selected in first combobox

javascript

knockout.js