Meteor 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.

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