Meteor - 在模板加载时向 DOM 元素添加类答案

【问题标题】：Meteor - add class to DOM element on template loadMeteor - 在模板加载时向 DOM 元素添加类
【发布时间】：2013-10-28 17:31:27
【问题描述】：

我正在尝试向一个 DOM 元素添加一个类，该元素是我所有 DOM 树的父级。我尝试了不同的方法：

//this one doesn't work at all. DOM is not loaded
Template.home.created = function() {
    Meteor.startup(function() {
        $("#wrapper").addClass('app');
   });
}

//this one only works if you do a page load, not if you render the template through a link (using router)
Template.home.created = function() {
    Meteor.startup(function() {
        $(document).ready(function() {
            $("#wrapper").addClass('app');
        });
   });
}

//also does not work if I click on a link
Template.home.created = function() {
    $(document).ready(function() {
        $("#wrapper").addClass('app');
   });
}

//does not work at all (I really expected this one to work by clicking on a link (using router))
Template.home.created = function() {
    $("#wrapper").addClass('app');
   });
}

我要做的事情再简单不过了：添加一个类，以便我可以根据每个模板设置包装器的样式。任何有关如何执行此操作的建议将不胜感激。

【问题讨论】：

标签： javascript jquery templates dom meteor

【解决方案1】：

模板创建方法在模板实例初始化但不等待 DOM 准备好操作时调用。

使用模板渲染方法，该方法将在模板渲染 DOM 时调用（第一次加载一次，每次模板内的标记发生变化时）

这样的东西应该可以工作（尚未测试）：

Template.home.rendered = function(){
    var element = $("#wrapper");
    if(!element.hasClass("app")){
        element.addClass("app"); 
    }
}

【讨论】：

这行得通，谢谢。我不想使用 home.rendered 因为每当我重新渲染模板时它都会运行这段代码，而不仅仅是第一次。无论如何，看起来他们正在为下一个版本进行更改，所以我认为这没什么大不了的。谢谢！
@LucasLobosque 没问题，我很高兴听到它有效。我不知道他们计划在下一个版本中更改“渲染”的行为。我渴望看到它推出，因为它可以解决我项目中一直困扰我的几个低优先级错误。

【解决方案2】：

尝试使用Template.home.rendered 而不是Template.home.created。不要在其中使用Meteor.startup 或$(document).ready。

http://docs.meteor.com/#template_rendered

Template.home.created 在创建模板对象时被调用，但此时没有任何内容被渲染到 dom 节点中。

【讨论】：