Инициализировать модель KnockOut с помощью json

Question

Я хочу инициализировать модель нокаута с помощью json, полученного с сервера.

На данный момент, у меня есть этот 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

Вы должны использовать ko.mapping.fromJS(), поскольку вы работаете с реальным объектом JavaScript.

Метод 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));