如何访问Template.myTemplate.events,Template.myTemplate.rendered等模板内声明的DOM元素

时间:2014-12-04 04:40:03

标签: meteor meteor-blaze

我有一个包含少量元素的模板(input,radioButton等)。如果我想在mytemplate中访问这些DOM元素,我可以在事件中访问它们

Template.myForm.events({
  'click #submitButton' : function (event, template) {
       //template variable here gives me access to the 
       //current template instance, so I can get to any 
       //DOM element within this template.
   }
})

Template.myForm.rendered = function () {
  //within this function I have access to "this" which points to template instance
}

我想知道是否有办法访问在这些事件函数之外的模板中声明并呈现回调的DOM元素?

提前致谢

1 个答案:

答案 0 :(得分:2)

您可以但需要引用模板实例。

原因是单个模板可以多次使用。在这种情况下,访问模板的一种易于使用的方式将不知道它将属于哪个实例。这就是您需要使用引用的原因,例如下面的示例中所做的。

您必须在渲染时将实例存储在某处:

TheTemplateInstance = null;

Template.myForm.rendered = function() {
    TheTemplateInstance = this;
}

然后,只要模板位于DOM上,您就可以在任意位置使用TheTemplateInstance

如果您多次使用myForm,那么它只能访问最后创建的那个。

此外,您没有为您的意图提供用例。但是有一些更好的方法可以用模板做大多数事情:

当某些变量发生变化时,JQuery会修改某些东西(帮助者最常用的最常见的用例)

Template.myForm.rendered = function() {

    var self = this;

    this.autorun(function() {
        var xx = something.findOne();

        self.$("something").autoform() //Some jquery call            
    });

}

和帮手:

Template.myForm.helpers({
   someName: function() {
       return Session.get("name");
   }
});

然后,您可以在模板的html中使用{{someName}},以便在使用Session.set("name", "a new value");

时可以更改