KnockoutJS - Tabelle nicht aktualisiert, wenn Array aktualisiert wird

Question

Ich habe ein Beispiel für das Problem hier erstellt:

http://jsfiddle.net/JustinN/qWeLT/1/

Mein eigentlicher Code ist an eine ASP.NET Web-Methode angeschlossen, so dass der Beispielcode wurde optimiert, um auf einen öffentlichen Web-Service zu zeigen.

Grundsätzlich habe ich ein Array, an das ich binde, aber nach einem Ajax-Aufruf zeigt die Tabelle nicht die aktualisierte Information. Ich bin mir nicht sicher, was ich vermisse, ich dachte zuerst, ich brauche das Mapping-Plugin, also habe ich es versucht, komme aber immer noch nicht weiter.

Sicherlich bin ich nicht dazu bestimmt, jedes Mal, wenn sich meine Daten ändern, applyBindings zu verwenden?

[EDIT]

JavaScript unten:

var ViewModel = function() { 
var self = this; 
self.items = ko.observableArray([]); 
self.refresh = function() { 
    $.ajax({ 
     type: "POST", 
     url: "http://api.wipmania.com/json", 
     data: "{}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (data) { 
      ko.mapping.fromJS(data.d, self.items.address); 
     } 
    }); 
}; 
} 

var viewModel = new ViewModel(); 
$(function() { 
ko.applyBindings(viewModel); 
viewModel.refresh(); 
}); 

HTML unter:

<table data-bind="visible:items.length > 0"> 
<thead> 
    <tr> 
     <th>Country</th> 
     <th>Code</th> 
    </tr> 
</thead> 
<tbody data-bind="foreach: items"> 
    <tr> 
     <td data-bind="text:country"></td> 
     <td data-bind="text:country_code"></td> 
    </tr> 
</tbody> 
</table> 

Answer 1

Schauen Sie sich diese Geige: http://jsfiddle.net/Gm7zH/1/

Zunächst einmal bin ich mit gefälschten Ajax-Daten wegen der Cross-Domain-Anfrage. Das sind die Daten, die ich von Ihrem Server bekommen habe. Und mit einem setTimeout die asynchrone Anfrage zu simulieren.

Dann haben Sie eine Reihe von Fehlern:

Sie versuchen, Eigentum Adresse von Array abzubilden, die es nicht gibt. Zweitens ist die Adresse Ihres Ergebnisses nur ein Objekt, also verpacke ich es in ein Array, damit es funktioniert.

Dann versuchen Sie, zu einem vorhandenen observableArray zu mappen, aber das Array als zweites Argument liefern, das zweite Argument ist die Mapping-Optionen, die dritte ist der richtige Ort dafür. In meinem Beispiel übergebe ich null als Mapping-Optionen.

Zuletzt, damit die Tabelle sichtbar ist, sagst du items.length> 0. Was du willst, ist items(). Length> 0 ist die Länge des zugrunde liegenden Arrays.

Answer 2

Ihr Array ist self.items, aber Ihre Ajax success Aufruf aktualisiert self.items.address, die ich vermute, bin ist undefined. Das Mapping-Plug-in erstellt also ein neues Modell, das nicht mit dem Original übereinstimmt.

(Sie haben nicht gezeigt, was data.d aussieht, aber ich nehme an, es ist ein Array.)

Sicher bin ich Änderungen meiner Daten nicht jedes Mal zu applyBindings gemeint?

Korrekt. Sie tun das einmal, dann sollten die Observablen aktualisiert werden (alles wird gut) das DOM aktualisieren.