Knockout JS 中的依赖可观察数组

Question

我已经开始使用 knockoutjs 并进行一些简单的绑定/依赖绑定。 我的目标是根据另一个 列表的值填充 1 个 列表。两者都是通过对我的 asp.net web 服务的 ajax 调用加载的。

所以我有两个 列表

<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 看起来像这样：

$(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"
            });

        });

目前这按预期工作，但我认为我做错了，因为代码看起来很长，我可以这样做无需在更少的代码中使用knockoutjs。 另外，我加载 availableModels 的方式显然不正确，因为我使用的是一个名为 UpdateModels 的 dependentObsevable，我添加它是为了加载 availableModels< /code> 基于 selectedMake().text 的值

我希望这是有道理的，你能指出这个的改进版本吗？或者简单地告诉我如何根据“品牌”选择重新加载模型？

非常感谢，

Answer 1

我认为你的代码看起来很正常。对于 UpdateModels dependentObservable，您实际上可以使用对 selectedMake 的手动订阅，如下所示：

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

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

您还可以选择在绑定中使用 optionsValue: 'text' （或 'value'），并且您的 selectedMake 将直接设置为文本或值。

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

Answer 2

我同意瑞安的回答。

稍微考虑一下相关的切线，我对其进行了一些重构，以不使用 ajax 并简化示例（您可以随时将其添加回来）。但这是一个小提琴，它演示了您希望如何处理一些示例数据。

http://jsfiddle.net/johnpapa/vGg2h/