Meteor with DataTables：Meteor._atFlush TypeError [英] Meteor with DataTables: Meteor._atFlush TypeError

问题描述

我正试图通过Meteor使用DataTables（通过 mrt add datatables ）。我已经多次尝试将 $（'＃mytableid'）。dataTable（）添加到 Meteor.subscribe 回调， Meteor.autorun ， Meteor.startup 和 Template.mytemplate.rendered - 都导致以下异常和表消息中没有可用的数据。

I'm trying to use DataTables (via mrt add datatables) with Meteor. I've variously tried adding the $('#mytableid').dataTable() to the Meteor.subscribe callback, Meteor.autorun, Meteor.startup, and Template.mytemplate.rendered -- all resulting in the following exception and a No data available in table message.

任何指针？

    Exception from Meteor._atFlush: TypeError: Cannot call method 'insertBefore' of null
        at http://localhost:3000/packages/liverange/liverange.js?bc1d62454d1fefbec95201344b27a7a5a7356293:405:27
        at LiveRange.operate (http://localhost:3000/packages/liverange/liverange.js?bc1d62454d1fefbec95201344b27a7a5a7356293:459:11)
        at LiveRange.replaceContents (http://localhost:3000/packages/liverange/liverange.js?bc1d62454d1fefbec95201344b27a7a5a7356293:403:17)
        at http://localhost:3000/packages/spark/spark.js?c202b31550c71828e583606c7a5e233ae9ca50e9:996:37
        at withEventGuard (http://localhost:3000/packages/spark/spark.js?c202b31550c71828e583606c7a5e233ae9ca50e9:105:16)
        at http://localhost:3000/packages/spark/spark.js?c202b31550c71828e583606c7a5e233ae9ca50e9:981:9
        at http://localhost:3000/packages/deps/deps-utils.js?f3fceedcb1921afe2b17e4dbd9d4c007f409eebb:106:13
        at http://localhost:3000/packages/deps/deps.js?1df0a05d3ec8fd21f591cfc485e7b03d2e2b6a01:71:15
        at Array.forEach (native)
        at Function._.each._.forEach (http://localhost:3000/packages/underscore/underscore.js?47479149fe12fc56685a9de90c5a9903390cb451:79:11)

更新：可能与此问题，找到的最佳解决方案是为每一行调用dataTable（） - 在这种情况下不是理想的，并且在我的考虑中可能是灾难性的大量的行。

Update: Potentially related to this issue, for which the best solution found was to call dataTable() for each row -- not ideal in that case, and potentially catastrophic in mine given the very large number of rows.

推荐答案

Dror的答案是正确的开始。这是我现在看到的最佳做法：

Dror's answer is the right start for sure. Here's the best practice the way I see it currently:

HTML

<template name="data_table">
    {{#constant}}
        <table class="table table-striped" id="tblData">
        </table>
    {{/constant}}
</template>

JS：

Template.data_table.created = function() {
    var _watch = Collection.find({});
    var handle = _watch.observe({
        addedAt: function (doc, atIndex, beforeId) {
            $('#tblData').is(":visible") && $('#tblData').dataTable().fnAddData(doc);
        }
        , changedAt: function(newDoc, oldDoc, atIndex) {
            $('#tblData').is(":visible") && $('#tblData').dataTable().fnUpdate(newDoc, atIndex);
        }
        , removedAt: function(oldDoc, atIndex) {
            $('#tblData').is(":visible") && $('#tblData').dataTable().fnRemove(atIndex);
        }
    });
};

Template.data_table.rendered = function () {

    if (!($("#tblData").hasClass("dataTable"))) {
        $('#tblStudents').dataTable({
            "aaSorting": []
            , "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>"
            , "sPaginationType": "bootstrap"
            , "oLanguage": {
                "sLengthMenu": "_MENU_ records per page"
            }
            , "aoColumns": [
                { "sTitle": "First Data", "mData": function (data) { return data.firstData },
            ]
        });

        $('#tblData').dataTable().fnClearTable();
        $('#tblData').dataTable().fnAddData(Collection.find().fetch());
    }
};

这篇关于Meteor with DataTables：Meteor._atFlush TypeError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！