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

Question

问题：当我的过滤器方法执行时用于显示 Html 元素，我的可观察数组还没有被我的 web-api 调用导致无法过滤。

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

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

我有一个简单的 Observable 数组和一个过滤方法。我的部分淘汰赛代码：

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 一起使用，是因为两者之间的 return 类型差异，语法错误还是其他原因？

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 仅被 HTML 调用一次。显然它被调用得太早并且之后没有得到更新。这正是可观察对象的用途，因此当 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>

Answer 2

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

你甚至可以做到 pureComputed 所以它只会在被调用时 activated/computed。

例如，当数组为空且过滤名称当数组被填充时。

计算:

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>

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

Ensure Observable Array is populated before Filter runs

javascript

asp.net

knockout.js

asp.net-web-api2

knockout-3.0