KnockoutJS - 根据第一个组合框中选择的值填充第二个组合框 [英] KnockoutJS - populating second combobox based on value selected in first combobox

问题描述

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

Below is my first piece of knockoutjs code i've written. In the code below, i have two list boxes. the first is populated after the page loads and works fine. What i want to do next is that when a user selects an item from the cmbDataSets listbox, i want to make a second ajax call to populate the 'instruments' property of my view model. later when the user selects an instrument, i want to make yet another call to fetch data that i will display in a grid (using slickgrid.js).

现在，我想了解实现这一目标的方法或最佳实践。我想我可以简单地在第一个列表框中添加正常的html / javascript选择更改事件处理程序来完成此...但我不确定这是否是推荐的方式（我知道它不是MVVM方式）。我觉得既然selectedDataSet是一个可观察的，我应该能够将它链接到一个事件处理程序..还没有？我的问题是怎么样？我可以在我的viewmodel上定义一个onSelectedDataSetChange方法，如果是这样，我如何将它挂钩到cmbDataSets控件的实际选择更改中？

Right now, i'd like to understand what are the ways or best practice for accomplish this. i think i can simply add normal html/javascript selection change event handler on the first list box to accomplish this...but i'm not sure if that is the recommended way (i know it's not the MVVM way anyway). I feel that since selectedDataSet is an observable, i should be able to chain that to an event handler as well..no? My question is how? Can i define an onSelectedDataSetChange method on my viewmodel and if so, how do i 'hook' it into the actually selection change of the cmbDataSets control?

<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>

推荐答案

您可以订阅第一个盒子selectOption observable和make每次更改时都会调用。

You can subscribe to the first boxes selectedOption observable and make a call whenever it changes.

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

其中ajaxCallFunction（）是用于获取第二个框的数据的函数，newValue是第一个框中新选择的值。

Where ajaxCallFunction() is the function you use to fetch the data for the second box, and newValue is the newly selected value from the first box.

这篇关于KnockoutJS - 根据第一个组合框中选择的值填充第二个组合框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！