使用Knockout和Datatables Ajax源碼

Question

我有一個這樣的數據表，並希望使我的數據錶行具有敲除可觀察屬性。能夠進行數據綁定的最佳方法是什麼：在數據表的某行上單擊「單擊」。我已經看到了datatables knockout綁定，但它似乎不支持ajax源。我嘗試使用foreach和模板綁定來創建表格並讓數據表從DOM初始化它的任何想法，但它刪除了我現在點擊它時沒有做的綁定。也似乎很慢。我想使用AJAX或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(); 
      } 
     } 

Answer 1

我不確定我是否在你的問題中得到了重點，如果我的答案看起來像是作弊，只是指向相關資源。無論如何，這裏都是。

您的第一個選項是使用load and save AJAX數據手動進出您的視圖模型。 The related tutorial做了一件相當不錯的工作來解釋事情。加載歸結爲：

// Load initial state from server, convert it to Task instances, then populate self.tasks 
$.getJSON("/tasks", function(allData) { 
    var mappedTasks = $.map(allData, function(item) { return new Task(item) }); 
    self.tasks(mappedTasks); 
}); 

它保存到您的服務是這樣的：

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

使用mapping plugin保存/在公約爲基礎的方式加載您的ViewModels一個相關第二個選項。儘管如此，您仍然需要一些接線來與服務器進行通信。

對於查看部分，在這兩種情況下，我認爲你已經有了正確的方法：在tbody上使用foreach binding併爲每個ViewModel構造一行。

同樣，這是一個非常模糊/廣泛的答案，部分原因是您的問題相當寬泛。希望能幫助到你。

Answer 2

這是做它的方式......我已經做了jsfiddle顯示此：

爲了得到這個工作，我有兩個回調方法添加到原來的淘汰賽的foreach綁定定義。我目前正試圖將這些事件納入最新版本的淘汰賽。我需要添加一個beforeRenderAll和afterRenderAll回調來銷燬數據表，並在敲除foreach綁定後添加html來重新初始化數據表。這工作就像一個魅力JSFiddle顯示這個有一個完全可編輯的jQuery數據綁定到ViewModel通過淘汰賽。

使用Knockout，您不會使用數據表的ajax實現。您將使用已經定義了html的標準實現。讓Knockout通過ajax加載數據並將其分配給可觀察數組來處理html。下面的自定義foreach綁定將銷燬數據表，讓knockout以默認的敲除方式處理html，然後綁定將重新初始化數據表。

var viewmodel = new function(){ 
    var self = this; 
    this.Objects = ko.mapping.fromJS([]); 
    this.GetObjects = function(){ 
     $.get('your api url here', function(data){ 
      ko.mapping.fromJS(
       data, 
       { 
        key: function(o){ return ko.utils.unwrapObservable(o.Id); }, 
        create: function(options){ return new YourObjectViewModel(options.data); } 
       }, 
       that.Objects 
      ); 
     }); 
    }; 
}; 

//Or if you do not need to map to a viewmodel simply just... 
$.get('your api url here', function(data){ 
    viewmodel.Options(data); 
}); 

及以下的自定義數據表綁定...

ko.bindingHandlers.DataTablesForEach = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 

     var value = ko.unwrap(valueAccessor()), 
     key = "DataTablesForEach_Initialized"; 

     var newValue = function() { 
      return { 
       data: value.data || value, 
       beforeRenderAll: function(el, index, data){ 
        if (ko.utils.domData.get(element, key)) {         
         $(element).closest('table').DataTable().destroy(); 
        } 
       }, 
       afterRenderAll: function (el, index, data) { 
        $(element).closest('table').DataTable(value.options); 
       } 

      }; 
     }; 

     ko.bindingHandlers.foreach.update(element, newValue, allBindingsAccessor, viewModel, bindingContext); 

     //if we have not previously marked this as initialized and there is currently items in the array, then cache on the element that it has been initialized 
     if (!ko.utils.domData.get(element, key) && (value.data || value.length)) { 
      ko.utils.domData.set(element, key, true); 
     } 

     return { controlsDescendantBindings: true }; 
    } 
};