Template.onRendered（）调用为时过早

Question

I have hit a strange problem. I am using hammer.js to configure long-press events, and attaching the event watcher within the Template.onRendered() callback. This works perfectly on my local development machine. However, when I deploy to a server, it seems that onRendered() is being fired before the template is finished rendering in the browser. The jQuery selector is empty. I've had to resort to setting a timer to make sure the template is rendered before configuring the event handler. Alternatively, I've tried configuring the event handler within a Tracker.afterFlush() in place of setTimeout(), but the template is still not rendered when this fires.

It seems that I shouldn't have to use setTimeout() here. Am I doing something wrong or out of order?

Template.CATEGORIES.onRendered(function () {

Meteor.setTimeout(function () {
    console.log('setting up hammer object', this.$('.collapsible'));
    var h = this.$('.collapsible').hammer({domEvents:true});
    h.on('tap press swipe pan', '.collapsible-header', function (ev) {
        // get the ID of the shopping list item object
        var target = ev.target;
        var $target = $(target);
        var type = ev.type;
        var $header = $target;
        if (Collapse.isChildrenOfPanelHeader($target)) {
            $header = Collapse.getPanelHeader($target);
        }

        console.log('Firing ', type, ' on ', $header);
        Kadira.trackError('debug', 'Firing ' + type + ' on ' + $header);

        // handler for checkbox
        if (type === 'tap' && $target.is('label')) {

            var data = Blaze.getData(target);
            var TS = data.checkedTS;
            ev.preventDefault();
            data.checked = !data.checked;

            console.log('Checkbox handler', data);

            if (data.checked && !TS) {
                TS = new Date()
            } else if (!data.checked) {
                TS = null
            }

            // Set the checked property to the opposite of its current value
            ShoppingList.update(data._id, {
                $set: {checked: data.checked, checkedTS: TS}
            });

        } else if (type === 'tap' && $target.has('.badge')) {
            // if the user taps anywhere else on an item that has a child with .badge class
            // this item has deals.  Toggle the expand.

            console.log('badge handler');

            $header.toggleClass('active');
            Collapse.toggleOpen($header);

        } else if (type === 'press' || type === 'swipe' || type === 'pan') {
            // remove any selected deals
            var itemID, item;
            var $label = $header.find('label');

            console.log('long press handler');

            if ($label) {
                itemID = $label.attr('for');
                item = ShoppingList.findOne(itemID);
                if (item && item.deal) {
                    Deals.update(item.deal._id, {$set: {'showOnItem': false}});
                    ShoppingList.update(itemID, {$set: {'deal': null}});
                }
            }
        }

    })

}, 2000);

});

Answer 1

Someone answered this the other day but must have withdrawn their answer. They suggested that the template was actually rendered, but that the data subscription had not finished replicating yet. They were right.

I was able to validate that I need to wait until the data subscription finishes prior to setting up my java script events.