Knockout: Wie überprüfte Bindung mit beobachtbaren Array von ganzen Objekten zu verwenden, sondern einzelne Eigenschaften vergleichen?

Question

Mein Problem ist wie folgt: Ich versuche eine Checkbox-Bindung zu verwenden, um ein Array von Objekten an eine Liste ausgewählter Objekte zu binden. Mein Problem ist, ich möchte das gesamte Objekt in die Liste binden, wie folgt:

<div data-bind="foreach: items"> 
    <div> 
     <input type="checkbox" data-bind="checked: $parent.selectedItems, value: $data"> 
    </div> 
</div> 

Wo Artikel ist die Liste der Objekte zu dem selectedItems beobachtbaren Array gebunden zu sein.

Um jedoch zu überprüfen, ob der Wert "aktiviert" ist, möchte ich einzelne Objekteigenschaften vergleichen. Der Grund dafür ist, dass ich Objekte aus verschiedenen Quellen sammle, und einige repräsentieren das gleiche Objekt, aber sie sind nicht völlig identisch. Außerdem muss ich bestimmte Untereigenschaften der ausgewählten Objekte in anderen Funktionen verwenden, daher muss das gesamte Objekt an das beobachtbare Array gebunden sein.

Vielen Dank im Voraus für Anregungen!

Answer 1

Wenn Sie den Knockout api graben sich in man dann sehen kann, wenn die ‚überprüft‘ Parameter ein Array ist, bestimmt die Bindungs ​​Handlers, wenn der Wert in dem Array als solche:

element.checked = ko.utils.arrayIndexOf(modelValue, checkedValue()) >= 0; 

Typischerweise checkedValue() wird in den Optionen auf den Punkt eingestellt wird, als ‚$ data‘ mit dem gleichen Wert:

var list = ko.observableArray({ value: "One" }, { value: "Two" }); 
var objectsInList = ko.observableArray(list[0]); 

in einer Optionen wie diese Bindung, in denen checkedValue nicht angegeben ist, wird der Wert von $ data das Objekt sein :

<select data-bind="options: list, checked: objectsInList"> 

Ich habe checkedValue nicht angegeben und daher wird die arrayIndexOf() -Operation im überprüften Bindungshandler basierend auf der Objektreferenz ausgeführt.

Was wollen Sie in der K.-o.-Dokumentation tun angegeben: http://knockoutjs.com/documentation/checked-binding.html

Sie können checkedValue in den Daten-bind Parameter wie folgt festgelegt:

var list = ko.observableArray({ value: "One" }, { value: "Two" }); 
var objectsInList = ko.observableArray("One"); 

<select data-bind="options: list, checked: objectsInList, checkedValue: 'value'"> 

Wenn Sie mehrere Objektparameter zu handhaben wollen Ich denke, Sie müssten Ihren eigenen Bindungshandler schreiben.

Answer 2

Änderung Ihrer html

data-bind="foreach: { data: items, as: 'item'}"> 
    <div> 
    <input type="checkbox" data-bind="checked: item.checked, value: item.value"> 
    </div> 
</div> 

Struktur Ihre Artikel als

this.items = ko.observableArray([ 
    {checked: true1, value : value1}, 
    {checked: true2, value : value2}, 
    {checked: true3, value : value3}, 
]) 

Natürlich im wirklichen Leben Sie haben keine Variablen genannt TRUE1, Wert1 etc, das wäre json Daten zurückgegeben aus eine API

Hinweis: zur Vermeidung von Problemen mit this Sie wahrscheinlich zu Beginn Ihrer Ansichtsmodell wollen

`var self = this` 

und verwenden

`self.items = ` 

Answer 3

Sie Funktionen in Bindings verwenden können.

Denken Sie daran, Bindings wickeln Sie Ihren Code in berechnet und das ist, wie Sie Auto UI aktualisieren. Dies bedeutet, dass Knockout ui möglicherweise nicht aktualisiert wird, wenn Sie es auch erwarten.

Aber wirklich, Sie müssen konsistente Daten in Ihrem Ansichtsmodell haben.