I want to init a Knockout model with as json received from the server.

For the moment, I have this 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>

And this JavaScript :

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

    this.fullName = koputed(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);

It works, but if I have more fields, it can painful.

I tried to use the mapping plugin like this :

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

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

ko.applyBindings(viewModel);

In this case, the method fullName is undefined.

I tried to do this :

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

And the lastName and firstName are undefined.

Is there a simple solution to do this?

Thanks!

I want to init a Knockout model with as json received from the server.

For the moment, I have this 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>

And this JavaScript :

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

    this.fullName = ko.puted(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);

It works, but if I have more fields, it can painful.

I tried to use the mapping plugin like this :

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

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

ko.applyBindings(viewModel);

In this case, the method fullName is undefined.

I tried to do this :

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

And the lastName and firstName are undefined.

Is there a simple solution to do this?

Thanks!

• javascript
• knockout.js

• 1 Is this fiddle more looking like what you're after? – Jeroen Commented Aug 22, 2013 at 18:27

3 Answers 3

You need to use ko.mapping.fromJS() since you're working with a real JavaScript object.

The ko.mapping.fromJSON() method is for when you're working with a JSON string. For example:

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

if data's property name and it corresponding viewModel observable names are same, you can use the following code.

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

ko.applyBindings(viewModel);

only knockout:

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

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

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

knockout + ko.mapping

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

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

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