用json初始化一個KnockOut模型

Question

我想用從服務器接收到的json初始化一個Knockout模型。

就目前而言，我有這樣的HTML：

<div class='liveExample'> 
    <p>First name: <input data-bind='value: firstName' /></p> 
    <p>Last name: <input data-bind='value: lastName' /></p> 
    <h2>Hello, <span data-bind='text: fullName'> </span>!</h2> 
</div> 

而且這個JavaScript：

// Here's my data model 
var ViewModel = function(first, last) { 
    this.firstName = ko.observable(first); 
    this.lastName = ko.observable(last); 

    this.fullName = ko.computed(function() { 
     return this.firstName() + "/" + this.lastName(); 
    }, this); 
}; 

var viewModel = new ViewModel(); 
data = { firstName: 'test', lastName: 'bla' }; //received from the server side 

viewModel.firstName(data.firstName) 
viewModel.lastName(data.lastName) 

ko.applyBindings(viewModel); 

它的工作原理，但如果我有更多的領域，它可以痛苦。

我試圖使用映射插件是這樣的：

var viewModel = new ViewModel(); 
data = { firstName: 'test', lastName: 'bla' }; //received from the server side 

viewModel = ko.mapping.fromJSON(data, viewModel) 

ko.applyBindings(viewModel); 

在這種情況下，該方法fullName是未定義的。

我試着這樣做：

viewModel = ko.mapping.fromJSON(viewModel, data) 

而且lastName和firstName是不確定的。

有沒有一個簡單的解決方案來做到這一點？

謝謝！

Answer 1

由於您使用的是真正的JavaScript對象，因此您需要使用ko.mapping.fromJS()。

ko.mapping.fromJSON()方法適用於處理JSON字符串時。例如：

'{ "firstName": "test", "lastName": "bla" }' 

Answer 2

如果數據的屬性名稱與其對應的viewModel可觀察名稱相同，則可以使用下面的代碼。

var viewModel = new ViewModel(); 
for(var prop in data) 
viewModel[prop](data[prop]); 

ko.applyBindings(viewModel); 

Answer 3

僅敲除：

var ViewModel = function(data) { 
    var self = this; 
    self.firstName = ko.observable(data.first); 
    self.lastName = ko.observable(data.last); 

    self.fullName = ko.computed(function() { 
     return self.firstName() + "/" + self.lastName(); 
    }); 
}; 

var data = {first: 'lorem', last: 'ipsum'}; 
ko.applyBindings(new viewModel(data)); 

淘汰賽+ ko.mapping

var ViewModel = function(data) { 
    var self = this; 
    ko.mapping.fromJS(initData, {}, self); 

    self.fullName = ko.computed(function() { 
      return self.firstName() + "/" + self.lastName(); 
    }); 
}; 

var data = {first: 'lorem', last: 'ipsum'}; 
ko.applyBindings(new viewModel(data));