Question

Fiddle: http://jsfiddle.net/amitava82/dawkn/6/

The input elements will be generated dynamically based on json data received from server. Here I’m using text fields but it could be select, radio etc and n number of them. Now, I’m confused how do I get values from these input elements and also associate them with respective models item so that I can send them to server. Appreciate any help. Thanks!

Answer 1

You need to define custom model for each data. For example:

function DataModel(opts) {
    var self = this;
    self.Id = ko.observable();
    self.DisplayName = ko.observable();
    self.ValueDisplayType = ko.observable();
    self.Value = ko.observable();
    for (var i in opts)
        try{ self[i](opts[i]); } catch(e) {}
}

I’ve added the for so you can do this:

new DataModel({
    "Id": 12,
    "DisplayName": "Rad Accept Time Out",
    "ValueDisplayType": 0
});

Now when you create the viewModel you can do this:

var l = data1.length, parsed_data = [];
for (var i = 0; i < l; i++)
    parsed_data.push( new DataModel(data1[i]) );
self.models = ko.observableArray(parsed_data);

In your template you can use this:

<script id="displayTmpl" type="text/html">
    <input type="text" data-bind="value: $data.Value" />
</script>

and finally in save method:

self.save = function(){
    var newValues = ko.toJS(self.models);
    console.log(newValue);
}

function ko.toJS transforms ko.observables to its values. When you have newValues then you can stringify them with JSON for example and send them to the server.

That’s more or less how I would do that. Feel free to ask additional questions in comments below.