Question

我有以下Meteor模板：

<template name="homeBoxTpl">
    <div>
        Some content
    </div>
</template>

我有一个事件绑定，所以当点击页面上的一个按钮时，它应该获得模板的html内容＆＃34; homeBoxTpl＆＃34; - 如何实现这一目标？

Answer 1

你需要的是一个event handler，就像Chase说你可以使用jquery访问流星模板的内容，但meteor有自己的方式。为了获得html的副本，您可以在模板中放置内容包装，然后执行以下操作：

Template.homeBoxTpl.events({
  'click #someButton':function(e,t){
       var templateContents = t.$('.wrapperInTemplate').html();  
  }
})

这里我们使用Template.$返回一个相同元素的jQuery对象。

查看Template.instances了解更多信息

Answer 2

只是澄清一下，按钮在哪里？它在另一个模板中吗？我假设你只渲染一次homeBoxTpl。

在这种情况下，按钮所在的模板的事件处理程序将不会引用另一个模板实例。 没有全局查找，您可以在其中找到特定Template的所有呈现实例

您必须为其设置唯一标识符“id”，或者其他一些有识别的信息，例如类/属性，并通过旧式JS DOM选择器/遍历找到它。

document.getElementById是最快的，但如果该模板有多个实例，t.firstNode确实为DOM遍历提供了一个很好的起点。

然而，使您的代码依赖于特定的DOM布局是不好的做法/过多的耦合。是否有任何理由为什么模板的HTML内容所基于的数据在其他地方（例如会话或集合）不可用？访问数据而非HTML也可能更灵活。

Answer 3

您可以使用jquery访问所需内容。例如，如果您有以下模板：

<template name="homeBoxTpl">
    <div class="content-container">
        Some content
    </div>
    <button id="btn" type="button">Click me</button>
</template>

然后使用以下javascript：

Template.homeBoxTpl.events({
    'click #btn': function(e) {
        e.preventDefault();
        var content = $(".content-container").text();
        console.log(content); //Result is "Some content"
    }
});

获取Meteor模板的内容

3 个答案: