我正在尝试实现可扩展的帖子评论的层次结构,如例如. Quora,以便用户可以点击评论并查看任何回复.
为此,我想跟踪每个“注释”模板实例是否“展开”,切换事件处理程序中的状态.
我可以使用整个堆栈Session变量(即每个注释一个),但这似乎很笨拙,因为任何给定页面上都有任意数量的注释.
以下是我正在尝试的片段.
JS：
Template.comment_item.events = {
'click #comment-content': function( e,instance ) {
this.expanded = true; // also tried instance.data.expanded = true
}
};
Template.comment_item.helpers({
showChildComments: function(){
this.expanded;
}
});
HTML：
<template name="comment_item">
<li class="comment comment-displayed" id="{{_id}}">
<div class="comment-body">
<div id="comment-content">
<!-- some comment data here -->
</div>
{{#if showChildComments}}
<ul class="comment-children comment-list">
{{#each child_comments}}
{{> comment_item}}
{{/each}}
</ul>
{{/if}}
</div>
</li>
</template>
不幸的是,当我经历时,似乎在showChildComments帮助器中,模板实例看不到展开的变量.我在文档中注意到,instance.data只读在事件映射中.
有没有办法直接在事件映射中修改模板实例？
解决方法
您可以为其创建的事件处理程序内的模板实例创建属性.您可以访问模板实例作为事件映射函数的第二个参数.
Template.comment_item.created = function() {
this.showChildren = false;
};
Template.comment_item.events({
'click .comment-content': function(event,template) {
template.showChildren = true;
}
});
然而：
>您无法从模板助手中访问您的模板实例及其属性.
>您的模板助手需要被赋予一个“反应”的数据源,无论如何,它都可以在现场更改.
>即使您遇到创建自己的反应数据源的麻烦,您对此功能的处理方法仍将为页面上的X个注释创建X个变量.这似乎是一个很大的变量在内存中实现一个功能.
我建议你做的是简化你的模板：
<template name="comment_item">
<li class="comment comment-displayed" id="{{_id}}">
<div class="comment-body">
<div class="comment-content"> <!-- changed this to a class -->
<!-- some comment data here -->
</div>
</div>
</li>
</template>
然后以编程方式将子注释添加到事件处理程序中的注释体.请记住以下Meteor文档：
A template that you declare as
<template name="foo"> ... </template>
can be accessed as the function Template.foo,which returns a string
of HTML when called.
哦,你将上下文传递给一个JSON对象的模板函数.例如.：
var context = {_id: comment_id,text: "Comment text!"};
Template.comment_item(context);
