ich html haben, die etwa wie folgt aussieht:Wechsel "mit" Eigenschaft ändert Arten
<div>
<table>
<tr onclick="show();">
<td class="cell">Click to open</td>
</tr>
</table>
</div>
<div style="display:none; position:absolute; left:150px" id="hiddenDiv">
<table data-bind="with: someProperty">
<tr onclick="hide();">
<td class="cell" data-bind="text:message"></td>
</tr>
</table>
</div>
<input type="button" value="Color cells" onclick="colorCells()" />
Und mein JavaScript sieht wie folgt aus:
function show() {
vm.someProperty(vm.list[1]);
$("#hiddenDiv").fadeIn("slow");
}
function hide() {
$("#hiddenDiv").fadeOut("slow");
}
function colorCells() {
$(".cell").css("background-color", "Yellow");
}
function ViewModel() {
this.list = [new SubModel("item 1"), new SubModel("item 2")];
this.someProperty = ko.observable(this.list[0]);
}
function SubModel(msg) {
this.message = msg;
}
var vm = new ViewModel();
$(function() {
ko.applyBindings(vm);
});
I here eine jsFiddle einrichten.
Nun ist das Problem, wenn Sie auf die Schaltfläche klicken, sollten alle Tabellenzellen mit Klasse "Zelle" ihre Hintergrundfarbe geändert haben. Wenn das versteckte div jedoch nicht sichtbar ist, wird die Hintergrundfarbe immer noch weiß angezeigt, wenn es sichtbar gemacht wird. Der Grund dafür scheint zu sein, weil ich die Eigenschaft ändere, die in einer "mit" -Bindung verwendet wird, die die versteckte Zelle umschließt. Es scheint, wenn Sie die mit "mit" gebundene Eigenschaft ändern, wird der Stil für seine Unterelemente zurückgesetzt.
(Wenn das keinen Sinn macht, tun Sie dies auf der jsFiddle. Klicken Sie auf die Schaltfläche, klicken Sie dann auf die "Click to open" Zelle. Beachten Sie, dass "Element 2" nicht markiert ist. Klicken Sie erneut auf die Schaltfläche und es wird Klicken Sie nun wieder auf die "Click to open" -Zelle, beachten Sie, dass "item 2" nicht mehr markiert ist. Entfernen Sie nun die Zeile, die "someProperty" in der show-Funktion setzt und wiederholen Sie den Versuch. "item 1" ist nun markiert richtig, unabhängig davon, ob es sichtbar war, als Sie auf die Schaltfläche Farbzellen klicken)
Ist dies von Entwurf? Gibt es eine Möglichkeit, es zu umgehen, so dass das Ändern einer Eigenschaft, die von "mit" verwendet wird, den Stil nicht zurücksetzt?
Hmmm ... Sie könnten auf etwas sein. Mein reales Beispiel ist viel komplizierter, aber ich denke, dass ich das schaffen kann. –
Eigentlich hoffe ich, Farbanimation mit dem jQuery.color() Plugin zu verwenden. Nicht sicher, ob ich das tun kann, wenn es ein Ansichtsmodell ko.observable ist? –
Wenn ein wenig Logik in die Farbanimation involviert ist, wie in Ihrem Fall mit dem Plugin color(), möchten Sie vielleicht die Farbe als ko.computed() betrachten, an die Sie eine Funktion übergeben können ausgeführt werden. Ein anderer Vorschlag, den ich hatte, ist, auch die Methoden show(), hide() und colorCells() in das View-Modell zu verschieben und dann die "click" -Datenbindung zu verwenden, um sie mit der ViewModel-Methode zu verbinden. Auf diese Weise sind sowohl die Daten als auch die Befehlslogik im ViewModel enthalten und Ihre Lösung wird der MVVM-Musterdefinition so nahe wie möglich, auf der Grundlage von knockoutjs. –