javascript - Using Knockout with Datatables Ajax source -

i have data table , make data table rows have knockout observable properties. best approach able data-bind:"click" on row in datatable. have seen datatables knockout binding doesnt seem support ajax sources. ideas tried using foreach , template bindings create table , having datatables initialize dom removes binding had when click nothing. seems slow. use ajax or js array.

         {                         "bdeferrender" : true,             "bprocessing" : true,             "sdom": '<"top"r>t<"bottom"lp><"clear">',             "olanguage" : {             "sloadingrecords" : "&nbsp;",                 "sprocessing" : processdialog             },             "sajaxsource":'/get_statistics',             "sajaxdataprop": 'landing_page_statistics',             "fnserverparams": function (aodata) {                 aodata.push({"name": "start_date", "value": startdateel.val()});                 aodata.push({"name": "end_date", "value": enddateel.val()});             },             "aocolumns" : [                 {"mdata" : "status", "swidth": "6%"},                 {"mdata" : "name"},                 {"mdata" : "url"},                 {"mdata" : "pageviews", "swidth": "15%"},                 {"mdata" : "leads", "swidth": "5%"},                 {"mdata" : "convrate", "swidth": "12%"}             ],             "fnrowcallback": function (nrow, adata, idisplayindex) {                 renderdatatablerow(nrow, adata, idisplayindex);             },             "fnfootercallback" : function (nfoot, adata, istart, iend, aidisplay) {                renderdatatabletotalsrow(nfoot, adata, istart, iend, aidisplay);             },             "fndrawcallback": function( osettings ) {                 // status tooltips                 $('.lp-status').tooltip();             }         } 

i'm not sure if point in question, , if answer feels cheating, merely pointing relevant sources. in case, here goes.

your first option use load , save ajax data , view models manually. the related tutorial pretty decent job of explaining things. loading comes down to:

// load initial state server, convert task instances, populate self.tasks $.getjson("/tasks", function(alldata) {     var mappedtasks = $.map(alldata, function(item) { return new task(item) });     self.tasks(mappedtasks); });  

saving service looks this:

self.save = function() {     $.ajax("/tasks", {         data: ko.tojson({ tasks: self.tasks }),         type: "post", contenttype: "application/json",         success: function(result) { alert(result) }     }); }; 

a related second option using mapping plugin save/load viewmodels in conventions-based way. still need wiring communicate server though.

for view part, in both cases think had correct approach: use foreach binding on tbody , construct 1 row per viewmodel.

again, pretty vague/broad answer, in part because question rather broad. hope helps.