Attaching jQuery plugins to Meteor template-generated DOM elements

问题

According to the Meteor documentation, a callback assigned to Template.template_name.rendered will execute after each instance of template_name has finished rendering. I have been trying to use this feature to attach jQuery plugins (such as TagsManager or DotDotDot) to DOM elements generated by the templates. The "natural" way to do this would be something like:

Template.template_name.rendered = function () {
    var template = this;
    var elem = $('input#tags'+template.data._id);
    elem.tagsManager();  // doesn't work
}

However, this does not work -- the expected behaviors do not come out attached to the element. The jQuery selector works properly and, by logging the internals of tagsManager(), I can see that the event handlers do seem to get attached, but after .tagsManager() finishes up, they are somehow unattached.

The "usual" solutions of wrapping the code in a $(document).ready or a short setTimeout suffer from the exact same behavior:

Template.template_name.rendered = function () {
    var template = this;
    $(document).ready(function () {
        window.setTimeout(function () {
            var elem = $('input#tags'+template.data._id);
            elem.tagsManager();
        }, 100);  // 0.1 seconds + $(document).ready doesn't work
    });
}

I only got it to work by giving an unrealistically high setTimeout time, such as 3 seconds:

Template.song.rendered = function () {
    var template = this;
    console.log("Template for "+template.data.title+" created");
    $(document).ready(function () {
        window.setTimeout(function () {
            var elem = $('input#tags'+template.data._id);
            elem.tagsManager();
        }, 3000);  // 3 seconds + $(document).ready works
    });
}

As a matter of fact, even replacing elem.tagsManager() by a simple elem.on('click',...) suffers from the same behaviors as described above -- which is why the guys at Meteor have given us Template.template_name.events, I guess. However, this kind of breaks all interesting plugins, and forces us to rely on hacky, dangerous code such as the above. Is there a better way?

回答1:

In the template, wrap the div you want to apply the jQuery with {{#constant}} helper. This will kill all reactivity you may have on elements wrapped up.

If you need reactivity or constant did not help, try this hack. I unbind the event of the element when rendered is called and bind it right after. The problem in this case is that rendered is called like a dozen times and it screw up some way I haven't figured out. Try debugging it to see how many it is called with console.log in the first line of rendered.

Hope it helps!

回答2:

check that package : https://github.com/Rebolon/meteor-animation/blob/master/meteor-animation-client.js line 38 to 56

it uses template.rendered with a cursor observer. It might help you coz it also uses jquery.

来源：https://stackoverflow.com/questions/17507275/attaching-jquery-plugins-to-meteor-template-generated-dom-elements

标签

meteor