Erstellen Sie berechnete Eigenschaft auf den Inhalt eines Elements in einer Untersammlung

Question

Ich baue ein Menü und ich habe ein category Objekt und es hat eine beobachtbare Array von menuitem s.

I erzeugt eine beobachtbare Eigenschaft, die auf der categorytrue ist, wenn mindestens einer der menuitem s im beobachtbaren Matrix eine Eigenschaft von activetrue hat.

(so hat die category eine berechnete Eigenschaft active benannt, die true, wenn mindestens eines der Elemente in der beobachtbaren Array von MenuItems die zu true gesetzt active Eigenschaft hat sein)

Die active Eigenschaft auf den menuitem ist eine beobachtbare boolean.

Jetzt scheint es, dass die berechnete Eigenschaft in der Kategorie sich nicht ändert, wenn sich die Eigenschaft auf ihrem Kind (Menü) ändert.

Ich kann den Wert des untergeordneten Elements (Menü) ändern, aber die berechnete Eigenschaft in der Kategorie nicht (ich protokolliere eine Konsole in der berechneten Eigenschaft in diesem Moment, und ich protokolliere einfach nicht, dass die berechnete Eigenschaft wird ausgewertet).

Ist das von Design, oder ich etwas falsch machen hier bin ...

PS wir die Version 2.3 von KO verwenden

Answer 1

oder bin ich hier etwas falsch zu machen ...

Es ist schwer zu sagen, ob Sie keinen Code zeigen, aber es scheint scheint es.

Hier ist eine Implementierung des von Ihnen beschriebenen Verhaltens, das genau das tut, was Sie erwarten. Da Sie Knockout 2.3 verwenden, wird der Subskriptionstrigger jedes Mal angezeigt, wenn der berechnete Wert neu berechnet wird. Beachten Sie, dass in späteren Versionen von Knockout nur ausgelöst wird, wenn sich der Wert tatsächlich ändert.

var Category = function() { 
 

 
    this.menuItems = ko.observableArray([ 
 
    { active: ko.observable(false) }, 
 
    { active: ko.observable(false) }, 
 
    { active: ko.observable(true) }, 
 
    { active: ko.observable(false) } 
 
    ]); 
 
    
 
    this.active = ko.computed(function() { 
 
    return this.menuItems().some(function(subMenu) { 
 
     return subMenu.active(); 
 
    }); 
 
    }, this); 
 
    
 
    this.active.subscribe(console.log); 
 
    
 
}; 
 

 
ko.applyBindings(new Category());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> 
 

 
<input type="checkbox" disabled data-bind="checked: active">Parent active 
 

 
<ul data-bind="foreach: menuItems"> 
 
    <li> 
 
    <label>(active <input type="checkbox" data-bind="checked: active">)</label> 
 
    <span data-bind="text: 'Menu ' + $index()"></span> 
 
    
 
    </li> 
 
</ul>