Callback when all Template items finished rendering in Meteor?

Question

I\'m getting a collection of records and placing them in a Template, having them rendered {{#each}} and I want to display a loading icon until the last DOM node

Answer 1

I found that JQuery's livequery plugin doesn't work when waiting for elements from a template to be written to the DOM. This is because the plugin listens on JQuery methods like append, but Meteor doesn't use JQuery. It uses an object called LiveRange to write to the DOM. I modified my livequery JavaScript file to work with this.

Near the bottom of the file, there is a line that calls registerPlugin(). I modified it to look like this:

$.livequery.registerPlugin([
    {object: $.fn, methods: ['append', 'prepend', 'after', 'before', 'wrap', 'attr',    'removeAttr', 'addClass', 'removeClass', 'toggleClass', 'empty', 'remove', 'html']},
    {object: LiveRange.prototype, methods: ['insertBefore', 'insertAfter']} 
]);

Then I modified the registerPlugin() method to look like this:

registerPlugin: function(registration) {
    for (var i = 0; i < registration.length; i++) {
        var object = registration[i].object;
        var methods = registration[i].methods;

        $.each( methods, function(i,n) {
            // Short-circuit if the method doesn't exist
            if (!object[n]) return;

            // Save a reference to the original method
            var old = object[n];

            // Create a new method
            object[n] = function() {
                // Call the original method
                var r = old.apply(this, arguments);

                // Request a run of the Live Queries
                $.livequery.run();

                // Return the original methods result
                return r;
            }
        });
    }
}

This will check to see if the element exists when insertBefore() or insertAfter() is called on the LiveRange object and will still work with JQuery as it did before.