2016-04-20 13 views
1

FiddleLöschen von Elementen aus einem Array mit knockoutjs ES5

Ich versuche knockout.js mit der ES5-Plugin zu verwenden, aber ich bin nicht in der Lage aus einem Array zu erhalten Löschen zu arbeiten.

Es scheint etwas zu funktionieren, Sie können löschen, aber es ist immer noch ein Element im Array übrig, aber nicht wirklich irgendwie. Ich bin total verwirrt, warum das nicht so funktioniert, wie du denkst.

Was mache ich falsch?

(Ich habe ein komplexeres Szenario, das ein durandal Widget verwendet, aber ich konnte es einfach einkochen diesen, so dass ich denke, die ES5-Plugin ist der Täter)

Hier ist mein Markup:

<div data-bind="foreach: staffList" style="border:1px solid black;"> 
    <div style="border: 1px solid red;"> 
     <p data-bind="text: Name"></p> 
     <p> 
      <button data-bind="click: deleteClickHandler">Delete</button> 
     </p> 
    </div> 
</div> 

und Skript:

function ctor(){ 
    var self=this; 
    self.staffList = [{Name:'one'},{Name:'two'},{Name:'three'},{Name:'four'}]; 
    ko.track(self.staffList, { deep: true }); 
    self.deleteClickHandler = function (obj) { 
    //TODO show confirm dialog first 
    var index = self.staffList.indexOf(obj); 
    if (index >= 0) { 
     self.staffList.splice(index, 1); 
    } 
    }; 
} 
ko.applyBindings(ctor); 

einzige andere Unterschied in der realen Welt ist, dass ich die Daten aus einem API-Aufruf bin immer, aber das Verhalten ist das gleiche.

Antwort

0

Interessante Frage. Ich bin mir noch nicht sicher über die Ursache, aber ich habe es geschafft, einen Weg zu finden, damit es funktioniert.Einige Änderungen, die ich brauchte:

  • Make ctor eine echte Constructor Funktion/verwenden Sie es als solche;
  • Aufgrund des vorherigen Punkts müssen Sie auf deleteClickHandler mit bestimmten Bereich beziehen;
  • Track self, nicht nur das eine Mitglied;

Hier ist ein Beispiel, dass works für mich:

<div data-bind="foreach: staffList" style="border:1px solid black;"> 
    <div style="border: 1px solid red;"> 
     <span data-bind="text: Name"></span> 
     <button data-bind="click: $root.deleteClickHandler">Delete</button> 
    </div> 
</div> 
<hr> 
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre> 
function ViewModel(){ 
    var self = this; 
    self.staffList = [{Name:'one'},{Name:'two'},{Name:'three'},{Name:'four'}]; 
    ko.track(self); 
    self.deleteClickHandler = function (obj) { 
    var index = self.staffList.indexOf(obj); 
    if (index >= 0) { 
     self.staffList.splice(index, 1); 
    } 
    }; 
} 
ko.applyBindings(new ViewModel()); 

Darüber hinaus habe ich ot erwähnen möchte, dass dies auch möglich ist:

self.deleteClickHandler = function (obj) { 
    self.staffList.remove(obj); 
    }; 

Wieder bin ich nicht sicher, warum ko.track(self.staffList) hat nicht funktioniert, aber das oben genannte bringt Sie zumindest.

+0

Ich verstehe die ganze "echte Konstruktor" Sache. Da ich Durandal benutze, glaube ich, dass es Neuigkeiten gibt, aber ich muss sicherstellen, dass das nicht das Problem ist. – Nate

+0

soweit "entfernen" betrifft; Ich hatte das zuerst, aber es gefiel mir nicht, ich dachte, das wäre ein Knockout-Zusatz, aber nicht es5? Ich werde das auch noch einmal besprechen müssen. – Nate

+0

Der einzige Unterschied, den ich sehe, ist, dass das Verfolgen von 'self' anstelle von' staffList' etwas ändert. Lassen Sie mich dies auf meinem Code ausprobieren und sehen, ob das das Problem ist. – Nate

0

Die Taste, die innerhalb der foreach-Schleife NEADS verschachtelt ist das übergeordnete zu verweisen, so dass

<button data-bind="click: $root.deleteClickHandler">Delete</button> 

statt

<button data-bind="click: deleteClickHandler">Delete</button> 

ich dies gerade getestet würde, und fand kein verbleib Elemente in der Ansicht aufgeführt. Das sollte das Problem lösen, das Sie sehen, da ich ein leeres Array sehe, nachdem das letzte Element gelöscht wurde.

Auch hatte ich das für eine normale beobachtbaren Array für das Objekt staffListko.track Aufruf der ko.applyBindings Aufruf ko.applyBindings(new ctor()); und entfernt zu ändern. Wenn es keinen bestimmten Grund gibt, können Sie das ObservableArray nicht verwenden?

JSFiddle Example

+0

Nicht mit "ObservableArray" ist der springende Punkt von knockout-es5 ... – Jeroen

+0

Danke @ Jeroen. Ich war mir dessen nicht bewusst, da ich "neuer" bin, Knockout zu nutzen (innerhalb der letzten 1,5 Jahre). –

+0

Wenn ich nicht es5 mit den Durandal-Widgets arbeiten kann, muss ich wieder auf normale alte KO zurückgreifen, nicht so schlecht, aber die ES5 ist einfach großartig, und es macht mich traurig zu denken, dass ich vielleicht loswerden muss es. – Nate

Verwandte Themen