代码之家 › 专栏 › 技术社区 › mike01010

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

knockout.js javascript

0

mike01010 · 技术社区 · 11 年前

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

现在,我想了解实现这一目标的方法或最佳实践是什么。我想我可以简单地在第一个列表框中添加普通的html/javascript选择更改事件处理程序来实现这一点。。。但我不确定这是否是推荐的方式(我知道这不是MVVM方式)。我觉得,由于selectedDataSet是一个可观察的数据集,因此我应该能够将其链接到事件处理程序。。不我的问题是怎么做?我可以在我的视图模型上定义一个onSelectedDataSetChange方法吗?如果可以,我如何将其“挂钩”到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>

2 回复 | 直到 11 年前

1

HotTowelie 11 年前

您可以订阅selectedOption observable的第一个框,并在其更改时进行调用。

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

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

2

1

Lipata 11 年前

迈克。

检查此代码,以在视图中设置更改事件:

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

然后是ViewModel中的属性:

selectionChanged: function(event) { }

这就是你要找的吗?除此之外,我还有一个小建议——SelectedDataSet和selectedInstrument也可以是可观察的数组。不同之处在于,您将使用的不是“value”投标,而是“value” selectedOptions “一。当你有多种选择时,这会对你有所帮助,但我认为,即使是单一选择,这也是一个更好的选择。