Removing bindings in Knockout js

Question

I am using koGrid in jquery mobile. When user click on a row, It will go the detail page. In that page user can update data and save it.blow is the my implementation

var ProgressGrid = function(){
    var self = this;
    self.ticketList = ko.observableArray(servicet.filterTsFromStatus('PROGRESS'));
    columnDefs: [
            {
                field: 'ticketNumber',
                displayName: 'Ticket',
                cellTemplate: "<button data-bind=\"click: function() {getRowDetails($parent.entity)}\"><span data-bind=\"text:$parent.entity['ticketNumber']\"></span></button>",
                width: '*',
                minWidth: "200px"
            }
    self.getRowDetails = function(row){
      var rtJS = servicet.getTicketById(row.id);
      servicet.goToTicketDetails(rtJS,false);
    },
}  

Ticket Object

function RunTicket(jsRunTicket) {
    ko.validatedObservable(ko.mapping.fromJS(jsRunTicket, validationMapping, self));

    this.save = function (action) {
    }
}

Service method

 goToRunTicketDetails: function(ticketJS,readOnly){
    ko.cleanNode(document.getElementById('runTicketDetailsPage'));
    var rt = new Ticket(ticketJS);
    ko.applyBindings(rt, document.getElementById("ticketDetailsPage"));
    $.mobile.changePage($('#ticketDetailsPage')) ;
}

When I click row button in the grid, it will go the "ticketDetailsPage" and I could update values and save it to the server as well.to first saving part functionality is working fine, If I go again to the grid load another ticket and save "Save message will appear twice"

If I save 5 tickets "Save" message appear five times. I think there are old tickets event not updating with DOM, Could anyone help me to solve this issue,I have been trying to solve this for two days, but still couldn't find proper solution,

Thank you in advance

Answer 1

ko.cleanNode is meant to make sure memory is freed when bindings are no longer needed. Most bindings, though, don't remove event handlers because it's not necessary to free memory. You should not use ko.cleanNode to try to re-apply bindings.

Knockout supports two methods of changing the view model that's bound to a DOM section. The first is through templates and the second is through observable view models.

Template method

This method always binds to a new set of DOM elements (copied from a template). There are various methods of defining and rendering the template; one is to use Knockout's ko.renderTemplate method. First, make sure you've defined the template in your HTML using <script type="text/html" id="ticketDetailsPageTemplate">. Then you'll use the template like this:

goToRunTicketDetails: function (ticketJS, readOnly) {
    var rt = new Ticket(ticketJS);
    ko.renderTemplate("ticketDetailsPageTemplate", rt, {}, document.getElementById("ticketDetailsPage"));
    $.mobile.changePage($('#ticketDetailsPage')) ;
}

Observable view model method

This method works similarly to your existing code in that the DOM elements are retained and re-bound to a new view model. But instead creating new event handlers, this method also updates the event handlers with the new view model. Here's one way you could do it:

goToRunTicketDetails: function (ticketJS, readOnly) {
    var elementToBind = document.getElementById('runTicketDetailsPage');
    var existingContext = ko.contextFor(elementToBind);
    var rt = new Ticket(ticketJS);
    if (existingContext && ko.isObservable(existingContext.$rawData)) {
        existingContext.$rawData(rt);   // update observable with new view model
    } else {
        ko.applyBindings(ko.observable(rt), elementToBind);   // initialize with observable view model
    }
    $.mobile.changePage($('#ticketDetailsPage')) ;
}