Podstawowe mapowanie JSON z knockoutem do pojedynczego obiektu JSON

Question

Jestem nowy w nokaucie i tworzę aplikację mobilną jquery, która chce uzyskać korzyści z nokautu. Ostatni dzień spędziłem waląc głową w ścianę, by rozwiązać bardzo prosty problem. Od tego czasu usunąłem kod i ręcznie wykonałem ręczne bindowanie (przez co prawie pokonałem cel używania KO przez jquery). W każdym razie, jeśli ktoś mógłby mi pokazać, jak zmienić to, co mam, aby użyć prawdziwej mocy KO, to byłby dla mnie wspaniały punkt wyjścia. Wszelkie przykłady kodu mogłem znaleźć zawsze były o wiele bardziej skomplikowanych problemów niż to (zajmujących się tablice itp)

Moje JSON:

{"id":9,"fullName":"John Doe","firstName":"John","lastName":"Doe","referenceNumber":"BUY-08","position":"Buyer","type":"Buyer","telephone":"028 82 240780","email":"m@email.com","departmentId":3,"departmentName":"DEPT B","country":"United Kingdom"} 

Moje HTML:

<div> 
    Full Name: <input data-bind="value: fullName" disabled="disabled"/> <br /> 
    Ref: <input data-bind="value: reference" disabled="disabled"/> <br /> 
    Position: <input data-bind="value: position" disabled="disabled"/> <br /> 
    Email: <input data-bind="value: email" disabled="disabled"/> <br /> 
    Dept: <input data-bind="value: departmentName" disabled="disabled"/> <br /> 
    Country: <input data-bind="value: country" disabled="disabled"/> <br /> 
</div> 

Moje javascript:

$(document).ready(function() { 

    function DetailsViewModel() { 
     var self = this; 
     self.fullName = ko.observable(""); 
     self.reference = ko.observable(""); 
     self.email = ko.observable(""); 
     self.position = ko.observable(""); 
     self.departmentName = ko.observable(""); 
     self.country = ko.observable(""); 

     var success = function (data) { 
      self.fullName(data.fullName); 
      self.reference(data.referenceNumber); 
      self.email(data.email); 
      self.position(data.position); 
      self.departmentName(data.departmentName); 
      self.country(data.country); 
      $.mobile.loading('hide'); 
     }; 

     webAPICall("api/user/getcurrentuser", 
      "GET", success); // simple wrapper I'm using for ajax calls 

    } 
    ko.applyBindings(new DetailsViewModel()); 
}); 

Każda pomoc jest bardzo doceniana, dzięki!

Answer 1

Używanie wtyczki do mapowania jest bardzo proste, jeśli nie potrzebujesz żadnych dodatkowych funkcji lub nie obliczysz swojego modelu widoku. Należy po prostu zdać JSON do ko.mapping.fromJS:

var viewModel = {}; 

function success(data) { 
    viewModel = ko.mapping.fromJS(data); 
    ko.applyBindings(viewModel); 
} 
webAPICall("api/user/getcurrentuser", "GET", success); 

Używaj fromJS funkcję, jeśli dane jest obiekt JS i fromJSON jeśli jest JSON ciąg. Upewnij się, że masz te same nazwy właściwości w atrybutach data-bind i json.

Oto przykład praca: http://jsfiddle.net/axrwkr/5t5fj/50/