将淘汰表与Datatables Ajax源一起使用

Question

我有一个这样的数据表，并希望使我的数据表行具有可观察到的剔除属性。 能够进行数据绑定的最佳方法是：“单击”数据表中的一行。 我见过一个数据表敲除绑定，但它似乎不支持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

我不确定我是否能理解你的问题，如果我这样做，我的回答就像是在作弊，只是指向相关资料。 无论如何，这是可行的。

您的第一个选择是使用加载模型并将 AJAX数据手动保存到视图模型中或从视图模型中保存 。 相关教程在解释事物方面做得相当不错。 加载归结为：

// 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) }
    });
};

第二个相关选项是使用映射插件以基于约定的方式保存/加载ViewModel。 但是，您仍然需要一些布线才能与服务器通信。

对于View部分，在两种情况下，我都认为您已经采用了正确的方法：在tbody上使用foreach绑定 ，并为每个ViewModel构造一行。

同样，这是一个相当模糊/广泛的答案，部分原因是您的问题很广泛。 希望能帮助到你。

Answer 2

这是做到这一点的方法...我制作了一个jsfiddle显示如下：

为了使它起作用，我必须在原始的敲除foreach绑定定义中添加两个回调方法。 我目前正在尝试将这些事件纳入最新版本的淘汰赛中。 我需要添加一个beforeRenderAll和afterRenderAll回调来销毁数据表，并在敲除foreach绑定添加html之后重新初始化数据表。 这就像一个魅力。JSFiddle显示了它具有一个完全可编辑的jquery数据表，该数据表通过剔除绑定到ViewModel。

使用Knockout，您将不会使用数据表的Ajax实现。 您将使用已定义html的标准实现。 让Knockout通过ajax加载数据并将其分配给可观察数组来处理html。 然后，下面的自定义foreach绑定将破坏数据表，让敲除以默认的敲除foreach方式处理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 };
    }
};