javascript - 将 Knockout 与 Datatables Ajax 源结合使用

Question

我有一个像这样的数据表，并且想让我的数据表行具有 knockout 可观察属性。能够进行数据绑定(bind)的最佳方法是什么:“单击”数据表中的一行。我见过一个数据表 knockout 绑定(bind)，但它似乎不支持 ajax 源。我尝试使用 foreach 和模板绑定(bind)来创建表并让数据表从 DOM 初始化它的任何想法，但它删除了我拥有的绑定(bind)，所以当我现在单击时它什么也不做。还显得很慢。我想使用 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 数据传入和传出 View 模型。 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以基于约定的方式保存/加载 ViewModel。不过，您仍然需要一些接线来与服务器通信。

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

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