Knockout.js使用json數據更新表單值

Question

我是一個帶knockout.js的新手，需要對如何簡單地使用json數據更新表單域非常基本的理解。我有一個視圖模型。我如何將json數據拖入可觀察字段？

<p>Errors: <input data-bind="value: errors" /></p> 
<p>Message: <input data-bind="value: message" /></p> 

// Here's my data model 
var ViewModel = function(myError, myMessage) { 
    this.errors = ko.observable(myError); 
    this.message = ko.observable(myMessage); 
}; 

ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work 

$.getJSON("http://api.twitter.com/1/statuses/public_timeline.json", function(data) { 

}) 

Answer 1

我更喜歡顯式設置視圖模型屬性 - 我覺得這樣更容易控制和維護。

var ViewModel = function(myError, myMessage) { 
    var self = this; 
    self.errors = ko.observable(myError); 
    self.message = ko.observable(myMessage); 
    self.property1 = ko.observable(); 
    self.property2 = ko.observable(); 
}; 

var vm = new ViewModel("Planet", "Earth"); 
ko.applyBindings(vm); // This makes Knockout get to work 
$.getJSON("http://api.twitter.com/1/statuses/public_timeline.json", function(data) { 
    vm.property1(data.field1); 
    vm.property2(data.field2); 
    ...etc 
}) 

如果這似乎太詳細，還有，你可以用它來自動地從JSON值映射到您的視圖模型的映射插件。

瞭解更多關於在這裏：​​http://knockoutjs.com/documentation/plugins-mapping.html

var vm = new ViewModel("Planet", "Earth"); 
ko.applyBindings(vm); // This makes Knockout get to work 
$.getJSON("http://api.twitter.com/1/statuses/public_timeline.json", function(data) { 
    var jsObject = ko.fromJSON(data); 
    ko.mapping.fromJS(jsObject , viewModel); 
})