Question

I have created a master-details ui using Knockout. An itemselected event handler on the master binds a details view for the given data item. Everything works so far, but I would like to gain access to the data which was bound to the details area so I can post it to the server once updated.

I am new to Knockout, so please advise if there is a better approach to this.

//the master binding code
$.ajax({
url: getURL,
success: function (data) {
var viewModel = new itemModel(data);
var scope = document.getElementById("listContainer");
ko.cleanNode(scope);
ko.applyBindings(viewModel, scope);
}



//the viewmodel with event hander
function itemWrapper(item) {
    this.SolutionSet = ko.observable(item.SolutionSet);
    this.Insight = ko.observable(item.Insight);
    this.DateFrom = ko.observable(item.DateFrom);
    this.DateTo = ko.observable(item.DateTo);
}

var itemModel = function (data) {
    var self = this;
    var observableData = ko.utils.arrayMap(data, function (item) {
        return new itemWrapper(item);
    });

    self.items = ko.observableArray(observableData);
    onItemSelected = function (data) {
        var scope = document.getElementById("itemEditor");
        ko.cleanNode(scope);
        ko.applyBindings(data, scope);
    };
}

Answer 1

I’m assuming you have a form or something that you are then editing your details?

Just keep the submit in your viewmodel

var itemModel = function (data) {
   this.onFormSubmit = function (item) {
     //call ajax and pass you item
   }
}


<form data-bind="submit: itemModel.onFormSubmit">
   fields here like so
   <input data-bind='value: itemModel.DateFrom , valueUpdate: "afterkeydown"'/> 
</form>