CODEWITHSUNDEEP
javascriptjqueryknockout.js
Etienne Noël
Etienne Noël

Reputation: 6166

How to update a JSON Object that is represented in a form

I have a JSON object that I used to create a form. This JSON object is parsed by KnockoutJS.

Now, when I modify the form, I want the JSON object to be updated according to the modifications made in the form. The thing is that I don't know in advance how the form will be like but I know in the JSON Object which fields need to be updated.

I really don't know what is the best way to procede. I know that I could reconstruct the JSON Object each time something has changed but this seems like a bad idea and a tedious process.

Is there a simple way to map each JSON Object field to form items in KnockoutJS ?

Here's a JSFiddle of what I'm currently doing:http://goo.gl/ZBaV7

Update :

I realized something interesting with this line:

<input type="text" data-bind="value: $data.value, attr : { disabled: $data.disabled }" />

I'm accessing the value directly from the array via ($data.value). Is there a way in the html to say to knockout to bind to this particular attribute in the array. I know that if the array would get reordered everything would get messed up but since I know that the only thing that can changed is this property I'm ready to take this risk ?

In other words, is there a way to manually say that when this value changes to change it in the array such as 

data-bind="onChange: $data.value = this.value"

Upvotes: 0

Views: 551

Answers (3)

bfuoco
bfuoco

Reputation: 715

Is there a simple way to map each JSON Object field to form items in KnockoutJS ?

Yes, If I understand what you want to do correctly. As of now, the values in your view model are not observables and won't be updated automatically as the form values change. There is a plugin to handle this mapping.

http://knockoutjs.com/documentation/plugins-mapping.html

Example: Using ko.mapping

To create a view model via the mapping plugin, replace the creation of viewModel in the code above with the ko.mapping.fromJS function:

var viewModel = ko.mapping.fromJS(data);

This automatically creates observable properties for each of the properties on data. Then, every time you receive new data from the server, you can update all the properties on viewModel in one step by calling the ko.mapping.fromJS function again:

ko.mapping.fromJS(data, viewModel);

Hopefully this helps.

Upvotes: 1

Matt Burland
Matt Burland

Reputation: 45135

The simplest way to turn your json model into a usable knockout model is with the mapping plugin.

Alternatively, you can manually copy fields from your json model into ko.observable members of your view model, which give you more control and lets you choose to skip read-only properties.

Upvotes: 0

ShaneBlake
ShaneBlake

Reputation: 11096

If your Knockout ViewModel matches your form, you could just use the built in ks.toJSON()

http://knockoutjs.com/documentation/json-data.html

A better option, especially if your form is large or complex, is to use either the mapping or viewmodel plug-ins

http://knockoutjs.com/documentation/plugins-mapping.html http://coderenaissance.github.io/knockout.viewmodel/

Upvotes: 1

Related Questions