0

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?

4

2 回答 2

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!

于 2013-07-06T21:45:47.673 回答
0

检查那个包：https ://github.com/Rebolon/meteor-animation/blob/master/meteor-animation-client.js 第38到56行

它使用带有光标观察器的 template.rendered。它可能会帮助您，因为它也使用 jquery。

于 2013-07-08T06:53:33.753 回答