javascript - 确保在过滤器运行之前填充 Observable 数组

Question

问题:当我的用于显示 Html 元素的过滤方法正在执行时，我的可观察数组尚未被我的 web-api 调用填充，导致无法过滤任何内容。

我的解决方案: 如果我在我的过滤器方法执行之前放置一个警报，一切似乎都在工作。 在我的警报调用之前，我的可观察数组的长度为 0，而在我的警报之后它有一个值。

问题:如何在不发出警报的情况下确保阵列已填充。 此问题发生在多个页面上，在呈现我的 Html 之前发出警报会使一切正常。

我有一个简单的 Observable 数组和一个过滤器方法。 我的部分 knockout 代码:

self.currentVendorSupport = ko.observable(new VendorContact());

//Populates Observable Array - allManufactures 
self.allManufacturers = ko.observableArray([]);
 $.getJSON(serviceRoot + '/api/Manufacturer', function (data) {  
    var mappedManufacturers = $.map(data, function (item) {
        return new Manufacturer(manID = item.manID, name = item.name);
    });
    self.allManufacturers(mappedManufacturers);
});

//Filters allManufacturers 
self.GetCurrentVendor = function () {
 alert('allManufacturerLength value again:' + allManufacturerLength);
 return ko.utils.arrayFirst(self.allManufacturers(), function (item) {
     return item.manID === self.currentVendorSupport().manID();
        });
}

这似乎是有效的。 它不能与 arrayFilter 一起使用，是因为两者之间的返回类型不同，语法错误还是其他原因？

self.GetCurrentManufacturer = ko.computed(function () {
if (self.allManufacturers().length > 0) 
{ 
return ko.utils.arrayFilter(self.allManufacturers(), function (item) 
    { 
    return item.manufacturerID === 
           self.currentVendorSupport().manufacturerID() }); 
    } 
else return new Manufacturer(0, '...'); 
}, self); 

Html Code: 
<label class="control-label readOnlyLabel" data-bind="text: GetCurrentVendor().name"></label> 

Answer 1

您可以简单地使 GetCurrentVendor 成为 computedObservable相反，这样您就可以根据可观察的数组长度有条件地显示一个值。因为它是计算出来的，所以它会对数组所做的更改做出 react 并更新它的值。

你甚至可以做到pureComputed所以它只会在调用时被激活/计算。

例如，computedObservable currentVendor 会在数组为空时显示“...”，而在数组填充时显示过滤后的名称.

计算:

self.currentVendor = ko.computed(function () {
    if(this.allManufacturers().length > 0) {
        return ko.utils.arrayFirst(this.allManufacturers(), function (item) {
            return item.manID === this.currentVendorSupport().manID();
        }).name;
    } else {
        return '...'
    }
}, this)

HTML:

<label class="control-label readOnlyLabel" data-bind="text: currentVendor"></label>