淘汰赛JS中的从属可观察数组 [英] Dependant Observable Array in Knockout JS

问题描述

我已经开始研究敲除js并做一些简单的绑定/依赖绑定. 我的目标是根据另一个<select>列表的值填充1个<select>列表.两者都从ajax调用加载到我的asp.net Web服务.

I have started to play around with knockoutjs and do some simple binding/dependant binding. My goal is to have 1 <select> list populated based on the value of another <select> list. Both are being loaded from an ajax call to my asp.net webservice.

所以我有两个<select>列表

<select id="make" data-bind="options: availableMakes, value: selectedMake, optionsText: 'text', optionsCaption: 'Choose a make'"></select>
<select id="model" data-bind="options: availableModels, value: selectedModel, optionsText: 'text', optionsCaption: 'Choose a model'"></select>

然后我的JavaScript看起来像这样:

Then my javascript looks like this:

$(function () {

            // creating the model
            var option = function (text, value) {
                this.text = text;
                this.value = value;
            }

            // creating the view model
            var searchModel = {
                availableMakes: ko.observableArray([]),
                availableModels: ko.observableArray([]),
                selectedMake: ko.observable(),
                selectedModel: ko.observable()
            }

            // adding in a dependentObservable to update the Models based on the selected Make
            searchModel.UpdateModels = ko.dependentObservable(function () {
                var theMake = searchModel.selectedMake() ? searchModel.selectedMake().text : '';
                if (theMake != '') {
                    $.ajax({
                        url: "/data/service/auction.asmx/GetModels",
                        type: 'GET',
                        contentType: "application/json; charset=utf-8",
                        data: '{make:"' + theMake + '"}',
                        success: function (data) {
                            var makes = (typeof data.d) == 'string' ? eval('(' + data.d + ')') : data.d;
                            var mappedModels = $.map(makes, function (item) {
                                return new option(item.text, item.value);
                            });
                            searchModel.availableModels(mappedModels);
                        },
                        dataType: "json"
                    });
                }
                else {
                    searchModel.availableModels([]);
                }
                return null;
            }, searchModel);

            // binding the view model
            ko.applyBindings(searchModel);

            // loading in all the makes
            $.ajax({
                url: "/data/service/auction.asmx/GetMakes",
                type: 'GET',
                contentType: "application/json; charset=utf-8",
                data: '',
                success: function (data) {
                    var makes = (typeof data.d) == 'string' ? eval('(' + data.d + ')') : data.d;
                    var mappedMakes = $.map(makes, function (item) {
                        return new option(item.text, item.value);
                    });
                    searchModel.availableMakes(mappedMakes);
                },
                dataType: "json"
            });

        });

当前这可以按预期工作，但是我认为我做错了，因为代码看起来很长，而且我可以在不使用较少代码的情况下使用基因敲除js的情况下做到这一点. 同样，我加载availableModels的方式显然是不正确的，因为我使用的是名为UpdateModels的dependentObsevable，我添加了该对象是为了基于selectedMake().text

Currently this works as expected, but I think that I am doing this wrong as the code looks pretty long, and I could do this without using knockoutjs in less code. Also the way that I am loading up the availableModels is obviously not correct because I am using a dependentObsevable called UpdateModels which I added in order to load up the availableModels based on the value of selectedMake().text

我希望这是有道理的，您可以指出对此的改进版本吗?还是简单地告诉我如何基于选择"选择重新加载模型?

I hope this makes sense and you can point out an improved version of this? Or tell me simply How do I reload the Models based on the Make selection?

非常感谢，

推荐答案

我认为您的代码看起来很正常.对于UpdateModels dependentObservable，您实际上可以使用对selectedMake的手动订阅，例如:

I think that your code looks pretty normal. For the UpdateModels dependentObservable, you can actually use a manual subscription to selectedMake like:

searchModel.selectedMake.subscribe(function (newMake) {
    if (newMake) {
        //ajax request
    }
    else {
        searchModel.availableModels([]);
    }
}, searchModel);

这不会更改功能，只是一种更明确的方式来订阅单个可观察的更改.

This would not change the functionality, just a more explicit way to subscribe to a single observable changing.

您还可以选择在绑定中使用optionsValue: 'text'(或值")，并且您的selectedMake将直接设置为文本或值.

You could also choose to use optionsValue: 'text' (or 'value') in the binding and your selectedMake would be set to the text or value directly.

如果您的模型是make对象的子代，那么您甚至可以将模型绑定到selectedMake().models(需要防止selectedMake为空，这可以使用DO，1.3控制流绑定或内联来完成)就像selectedMake() ? selectedMake().models : []

If your models were children of the make objects, then you could even bind the models to selectedMake().models (would need to protect against selectedMake being null, which could be done using a DO, the 1.3 control flow binding, or inline like selectedMake() ? selectedMake().models : []

这篇关于淘汰赛JS中的从属可观察数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！