Temel Nakavt JS haritalama tek bir JSON nesnesine

Question

Nakavt yapmaktan çok yararlanıyorum ve nakavt avantajlarından yararlanmak isteyen bir jQuery mobil uygulaması oluşturmaktayım. Son günümde kafamı çok basit bir problem için duvara yaslayarak geçirdim. O zamandan beri kodu sildim ve el ile elle ciltleme yaptım (böylece neredeyse jquery üzerinde KO kullanımıyla neredeyse yeniliyordum). Birisi bana KO'nun gerçek gücünü kullanmak zorunda olduğum şeyi nasıl değiştireceğimi gösterebilirdi, o zaman benim üzerine inşa etmem için harika bir nokta olurdu.

{"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"} 

Benim 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> 

Benim JavaScript: bulabildiğim Herhangi kod örnekleri çok daha karmaşık sorunlar bundan daha

Benim JSON (diziler vb uğraşan) için hep

$(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()); 
}); 

Herhangi bir yardım için teşekkür ederiz, teşekkürler!

Answer 1

Ek işlevlere ihtiyacınız yoksa veya görünüm modeliniz için hesaplanmışsa, eşleme eklentisinin kullanımı çok basittir. Sadece ko.mapping.fromJS için JSON geçmelidir:

var viewModel = {}; 

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

Kullanım fromJS fonksiyonunu da JSON dizesi ise veri JS nesnesi ve fromJSON ise. Ve data-bind özniteliklerinde ve json'da aynı özellik adlarına sahip olduğunuzdan emin olun. Ben document.ready ilan vardı() - http://jsfiddle.net/axrwkr/5t5fj/50/