具有多个函数调用的 KnockoutJS 和级联下拉菜单

Question

我是新手，使用 KnockoutJS，使用 SPServices 与 SharePoint 列表交互。我正在尝试创建一个级联下拉菜单并且有点卡住了。本质上，我有一个位置列表和该位置的建筑物列表。选择位置后，我构建了一个 CAML 查询来过滤掉建筑物下拉菜单中显示的数据库。真的很感谢大家在这个网站上的工作。在过去的几个月里，对我的帮助很大，但似乎在这个问题上找不到任何东西。下面代码中的结束状态是适用于位置的下拉菜单，但一旦显示建筑物，就会出现空下拉菜单。

Javascript：

var bm = new BuildingModel();
var lm = new LocationModel();

var ViewModel = function(){        

var vm  = this;

vm.locationID = ko.observable();
vm.buildingID = ko.observable(); 
vm.locations = lm.getLocationsAsJSON();

  vm.buildings = ko.computed(function(){

        if(vm.locationID() === undefined){              
        return bm.getBuildingsAsJSON();
        } else {
            return bm.getBuildingsAsJSON(vm.locationID().id());
    }

  });

本质上，getXXXXAsJSON 从两个不同的 SharePoint 列表返回建筑物/位置对象的 observableArray。请注意，对象中的每个属性都定义为 ko.observable()。我所看到的所有内容都显示了基于单个文件的链接，该文件试图使用 AJAX 调用自动填充选择框，因为另一个下拉变量（在本例中为 locationID）已更新。这些功能可以正常工作，因为以下工作（只是没有链接两个下拉菜单）：

vm.locations = lm.getLocationsAsJSON();
vm.buildings = bm.getBuildingsAsJSON();

HTML：

<select data-bind="options: locations,  optionsText: function(location){return location.longName}, value: locationID, optionsCaption:'Choose...'"></select>
<select data-bind="options: buildings, optionsText: 'number', value: buildingID, optionsCaption: 'Choose...'"></select>

我认为很简单的事情并没有发生。我觉得很近，只需要一脚。

谢谢！

Answer 1

如果您想将此计算绑定到选择控件，则不应在计算中返回可观察数组。 Computed is function and observable array is function too when options binding tries to parse you computed value it uses ko.utils.unwrapObservable() function to get real value but it returns another function (observable Array) instead of real data.

有 3 种可能的修复方法：

第一个选项： 为您的bm.getBuildingsAsJSON() 函数调用ko.utils.unwrapObservable()。您的计算结果如下：

  vm.buildings = ko.computed(function(){

        if(vm.locationID() === undefined){              
        return ko.utils.unwrapObservable(bm.getBuildingsAsJSON());
        } else {
            return ko.utils.unwrapObservable(bm.getBuildingsAsJSON(vm.locationID().id()));
    }

第二个选项： 调用bm.getBuildingsAsJSON()函数后添加()。您的计算结果如下：

  vm.buildings = ko.computed(function(){

        if(vm.locationID() === undefined){              
        return bm.getBuildingsAsJSON()();
        } else {
            return bm.getBuildingsAsJSON(vm.locationID().id())();
    }

第三个选项： 不要在 bm.getBuildingsAsJSON 函数中返回 observable 数组。