Wie benutzt man das Mapping Plugin für Knockout?

Question

Ich habe

$(function() { 



    function get_updates() { 
     $.getJSON('/new-lines.json', function(data) { 
      var fullViewModel= ko.mapping.fromJS(data); 
      ko.applyBindings(fullViewModel) 


     }); 
    } 

    function poll() 
    { 
     setTimeout(function(){ 
     get_updates(); 
     poll();},3000) 

    } 




    poll() 
}); 

Und die JSON-Daten sehen wie folgt aus dem folgenden Code geschrieben:

{"state": "R", "qualities": ["ABC", "XYZ", "324"], "name": "ABC"} 

Wie soll ich den html Teil schreiben?

Ich bin sehr neu zu Javascript. Bitte helfen Sie.

Answer 1

Ihre Frage ist ein wenig irreführend, da Sie anscheinend das Mapping-Plugin korrekt verwenden.

Was ist nicht korrekt ist die Art, wie Sie knockout verwenden. Sie rufen alle 3 Sekunden ab, laden Daten und binden erneut. Es wird empfohlen, dass Sie für eine typische KO-Anwendung nur applyBindings einmal aufgerufen haben.

Wenn Sie ein Modell regelmäßig aktualisieren, ist Ihr Ansatz, das Mapping-Plugin zu verwenden, korrekt. So würde ich es machen.

http://jsfiddle.net/madcapnmckay/NCn8c/

$(function() { 
    var fakeGetJSON = function() { 
     return {"state": "R", "qualities": ["ABC", "XYZ", "324"], "name": "ABC"}; 
    }; 

    var viewModel = function (config) { 
     var self = this; 

     // initial call to mapping to create the object properties 
     ko.mapping.fromJS(config, {}, self); 

     this.get_updates = function() { 
      ko.mapping.fromJS(fakeGetJSON(), {}, self); 
     };    
    }; 

    // create viewmodel with default structure so the properties are created by 
    // the mapping plugin 
    var vm = new viewModel({ state: "M", qualities: [], name: "Foo" }); 

    function poll() 
    { 
     setTimeout(function(){ 
      vm.get_updates(); 
      poll(); 
     }, 3000) 
    } 

    // only one call to applybindings   
    ko.applyBindings(vm); 
    poll(); 
}); 

Und ein Beispiel html

<h1>Name <span data-bind="text: name"></span></h1> 
<h2>State <span data-bind="text: state"></span></h2> 
<ul data-bind="foreach: qualities"> 
    <li data-bind="text: $data"></li> 
</ul> 

Hoffnung, das hilft.