Bản đồ JS Knockout cơ bản cho một đối tượng JSON đơn

Question

Tôi rất mới loại trực tiếp và đang tạo một ứng dụng di động jquery muốn có được lợi ích của loại trực tiếp. Tôi đã trải qua ngày cuối cùng đập đầu vào tường vì một vấn đề rất đơn giản .. Tôi đã xóa mã và đi kèm với một hướng dẫn sử dụng bằng tay (do đó gần như đánh bại mục đích sử dụng KO trên jquery) .. Dù sao, nếu ai đó có thể cho tôi thấy làm thế nào để thay đổi những gì tôi phải sử dụng sức mạnh thực sự của KO sau đó nó sẽ là một điểm tuyệt vời cho tôi để xây dựng trên. Bất kỳ mã ví dụ tôi có thể tìm luôn cho các vấn đề phức tạp hơn nhiều hơn thế này (đối phó với mảng vv)

JSON của tôi:

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

HTML của tôi:

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

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

Bất kỳ trợ giúp nào được đánh giá cao, Cảm ơn!

Answer 1

Sử dụng plugin ánh xạ rất đơn giản nếu bạn không cần thêm bất kỳ chức năng nào hoặc được tính cho mô hình chế độ xem của mình. Bạn chỉ cần vượt qua JSON của bạn để ko.mapping.fromJS:

var viewModel = {}; 

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

Sử dụng chức năng fromJS nếu dữ liệu là đối tượng JS và fromJSON nếu nó là JSON chuỗi. Và đảm bảo rằng bạn có cùng tên thuộc tính trong các thuộc tính data-bind và json.

Dưới đây là ví dụ làm việc: http://jsfiddle.net/axrwkr/5t5fj/50/