Javascript 确保在运行筛选器之前填充可观察数组

问题：当执行用于显示Html元素的筛选方法时，我的可观察数组尚未由web api调用填充，因此没有任何可筛选内容

我的解决方案： 如果我在执行过滤方法之前发出警报，那么一切似乎都正常。 我的可观察数组的长度在我的警报调用之前是0，而在我的警报之后有一个值

问题：如何确保在不发出警报的情况下填充阵列。 这个问题发生在多个页面上，在呈现我的Html之前放置一个警报可以使一切正常

我有一个简单的可观测阵列和一个滤波方法。 我的淘汰码的一部分：

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> 

self.GetCurrentManufacturer=ko.computed（函数（）{
如果（self.allManufacturers（）.length>0）
{ 
return ko.utils.arrayFilter（self.allManufacturers（），函数（项）
{ 
返回项。manufacturerID==
self.currentVendorSupport（）.manufacturerID（）}）；
} 
否则返回新制造商（0，“…”）；
}，自我）；
Html代码：

现在，编写代码时，HTML只调用一次

GetCurrentVendor

。很明显，它调用得太快，之后不会更新。这正是observable的用途，因此当JS值更新时，HTML会得到更新。所以试试这个：

JS

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

//Populates Observable Array - allManufactures 
self.allManufacturers = ko.observableArray([]);

//New observable, initially empty
self.currentVendorName = ko.observable();
  $.getJSON(serviceRoot + '/api/Manufacturer', function (data) {  
  var mappedManufacturers = $.map(data, function (item) {
     return new Manufacturer(manID = item.manID, name = item.name);
  });
  self.allManufacturers(mappedManufacturers);
  //updated value after api call is complete
  self.currentVendorName(self.GetCurrentVendor().name);
});

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

HTML

//this automatically updates when a new value is available
<label class="control-label readOnlyLabel" data-bind="text: currentVendorName"></label> 

//当一个新值可用时，它会自动更新

您只需将

GetCurrentVendor

改为a，这样您就可以根据可观察的数组长度有条件地显示一个值。由于它是计算出来的，所以它会对数组的更改做出

反应，并更新其值

您甚至可以使其仅在调用时被激活/计算

例如，当数组为空时，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)

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

HTML：

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)

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


这是一条很难承认的路，但现在你两次进来写了一个比我的答案更有意义的答案，我忍不住投了赞成票。我是个粉丝@用户877247我不确定我是否明白。什么是
arrayFilter
？您只需确保您的计算返回一个字符串，以便您可以在屏幕上显示该字符串。请确保不要返回对象/数组，因为
未装箱时的对象/数组将无法打印所需内容。@Akrion:它似乎起作用了。但它不能与arrayFilter一起工作，这是因为两者之间的返回类型不同、语法错误还是其他原因？请参阅上述代码中的self.GetCurrentManufacturer。我只是想了解两者之间的区别。当然这是我在上一篇文章中所说的。评论
arrayFilter
返回一个数组，因此在计算中，一种情况下返回一个数组，另一种情况下返回一个对象。您需要保持一致并返回相同的类型。