流星JS模板渲染函数在渲染模板之前调用? [英] Meteor JS Template rendered function called before template is rendered?

问题描述

我正在尝试在JQuery UI中使用Buttonset小部件.我已经加载了程序包，并且我的模板很好地呈现了单选按钮.我有一个渲染"函数来调用JQ UI例程来设置按钮集:

I'm trying to use the Buttonset widget in JQuery UI. I've got the package loaded and my template renders the radio buttons fine. I have a "rendered" function to call the JQ UI routine to setup the buttonset:

Template.teamList.rendered = function () {
    $("#buttonsetID").buttonset();
}

但是看起来渲染函数在模板渲染之前被称为 ！我将console.log粘贴到该函数中，然后在屏幕上没有任何内容之前将其打印到控制台.因此，没有设置任何单选按钮，因此.buttonset()调用不执行任何操作.如果在页面渲染后在控制台中进行了调用，则JQuery UI会执行正确的操作，并显示我的按钮集.

But it looks like the rendered function is being called before the template is rendered! I stick a console.log in the function and it prints out to the console before there's anything on the screen. So none of the radio buttons are set up, therefore the .buttonset() call does nothing. If I make that call in the console after the page is rendered, JQuery UI does the right thing and my button set appears.

设置完所有功能后，不是应该调用.rendered函数吗?我在做错什么吗?

Isn't the .rendered function supposed to be called after everything's set up? Am I doing something wrong?

谢谢！

作为示例，在排行榜示例中可以看到相同的内容.

As an example, the same thing is seen in the leaderboard example.

如果添加:

  Template.leaderboard.rendered = function() {
     alert($('.player').length);
  }

显示该页面时，它将显示0.如果您需要添加一些JQuery事件，或者在这种情况下添加一个JQuery UI元素，这将使访问DOM项变得困难.

When the page is displayed, it will show 0. This makes it difficult to access the DOM items if you need to add some JQuery events or, in this case, a JQuery UI element.

推荐答案

rendered仅适用于第一次将模板添加到页面时将出现在DOM中的元素.假定订阅数据需要无限长的时间才能到达，然后查看模板并查看哪些元素将以默认状态显示.

rendered only works for elements which will appear in the DOM the very first time the template is added to the page. Assume that subscription data takes infinitely long to arrive, then look at the template and see which elements would appear in the default state.

使用排行榜示例，我们可以不能假定排行榜模板呈现时玩家可用(取决于订阅).要定位播放器，您应该在播放器模板上使用rendered回调.

Using the leaderboard example, we can't assume that players are available when the leaderboard template renders (it depends on a subscription). To target a player, you should use the rendered callback on the player template.

很难概括何时应用jQuery插件的策略，但是这里有一些想法:

It's hard to generalize a strategy for when to apply jQuery plugins, but here are some ideas:

• 如果元素将始终以默认状态添加(例如，该元素是硬编码的且不依赖于条件)，则使用rendered回调.

使用最具体子模板的rendered回调来定位该子对象(例如，上方的播放器模板).

Use the rendered callback of the most specific child template to target that child (e.g. the player template from above).

考虑使用事件处理程序回调来定位元素(如果外观取决于)一个事件(例如，单击按钮).

Consider using an event handler callback to target the element if it's appearance depends on an event (e.g. a button click).

考虑使用模板自动运行回调来定位元素(如果外观取决于)反应状态.请参阅此问题为例.

Consider using a template autorun callback to target the element if it's appearance depends on reactive state. See this question for an example.

这篇关于流星JS模板渲染函数在渲染模板之前调用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！