Knockout where Klausel in Foreach

Question

Ich möchte diese Logik in Knockout foreach replizieren .. irgendwelche Vorschläge bitte? Der aktuelle Code ist in gestochen und ich bin Umwandlung dieser knockoutJS zu verwenden

Wo ItemStatus.Active 0 in einem Enum in C# (Backend)

@foreach (var employee in Employees.Where(x => x.Status == ItemStatus.Active)) 
{ 
     <div class="someclass”> 
     <span class="label">Name:</span> 
     <span class="value">@employee.Name</span> 
    </div> 
    } 

Wie replizieren ich diese Logik in Knockout foreach, dh ich möchte nur Mitarbeiter zeigen, die derzeit aktiv sind oder eingesetzt

Sie danken

Answer 1

ich würde für ein Array-Filter in meiner Ansicht nach Modell gehen, dass man, etwas entlang der Linien von lösen:

Machen Sie es wirklich Swish, indem Sie den Array-Filter in eine berechnete Funktion arbeiten und binden Sie das an Ihr div, es gibt viele Dokumentation/Tutorials auf Knockouts-Website, um Ihnen dabei zu helfen.

Knockout Tutorial Website

Answer 2

Knockout des computed oder pureComputed würde den Trick tun.

Versuchen mit VM wie diese

function VM(data) { 
    var self = this; 
    //............. 
    self.filter = ko.observable(null); 
    self.data = ko.observableArray(data) 

    self.filteredData = ko.pureComputed(function(){ 
     return self.data().filter(function(x){ 
      return !self.filter() || x.status == self.filter(); 
     }) 
    }); 
    self.setFilter = function(filter) { 
     self.filter(filter || null); 
    } 
    //......................... 
} 

und Markup wie diese

<ul data-bind="foreach:filteredData"> 
    <li data-bind="text:$data.value"> 
    </li> 
</ul> 
<a href="#" data-bind="click:setFilter(null)">all</a> 
<a href="#" data-bind="click:setFilter('active')">active</a> 
<a href="#" data-bind="click:setFilter('archived')">archived</a> 

Diese kleine Testanwendung wie dieser

var someData = [ 
    {status: 'active', value: 'some active'}, 
    {status: 'active', value: 'another active'}, 
    {status: 'archived', value: 'some archived'}, 
    {status: 'archived', value: 'another archived'}, 
]; 
var vm = new VM(someData); 
ko.applyBindings(vm); 
vm.setFilter(null); 

Hinweis initialisiert werden kann, dass, wenn Ihre Daten Array statisch (keine Änderungen während des Seitenlebenszyklus werden erwartet) Sie könnenweglassen 210 beobachtbare Array von der VM und verwenden Sie einfach data statt