Search code examples
knockout.jsknockout-mapping-plugin

refreshing jquery datatables mapped knockout binding


I have a knockOUtDataTable that is bound to a mapped observable array

I am needing to refresh the dataTables binding via ajax.

it is originally created by using the following mapping options to map it to the obversable Array called batchHistories

var mappingOptions = {
            'batchHistories': {
                create: function (options) {
                    return new BatchHistoryViewModel(options.data, dataContext);
                },
                key: function (batchHistory) {
                    return ko.utils.unwrapObservable(batchHistory.Id);
                }
            } 
        };

ko.mapping.fromJSON(data, self);

I am doing the following to refresh the binding and the dataTable but when it runs this the data doesn't change when it should. If I refresh the whole page them it is up to date.

        self.refresh = function () {
                $.when(this.dataContext.getBatchHistories(0, "Any"))
                    .done(function (result) {
                        {
                            self.destroyDataTableFromId(dataTableId);
                            ko.mapping.fromJSON(result, self);
                            self.createDataTable(dataTableId);
                        }

                    });
        };

do I need to redo the mapping or anything here? can you see what I am missing?

the createDataTable function just has the jqueryDataTable jquery stuff.


Solution

  • my issue was the data being returned was not being recognized as JSON so changing it to

    ko.mapping.fromJS(result, self);
    

    did the trick