9

我正在尝试实现可扩展的帖子评论的层次结构，例如 Quora，以便用户可以单击评论并查看任何回复。

为此，我想跟踪每个“评论”模板实例是否“扩展”，切换事件处理程序中的状态。

我可以使用整个堆栈会话变量（即每个评论一个）来做到这一点，但这似乎很笨拙，因为在任何给定页面上都有任意数量的评论。

下面是我目前正在尝试的一个片段。

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 在事件映射中是只读的。

有没有办法直接修改事件映射中的模板实例？

4

2 回答 2

10

您可以在其创建的事件处理程序中为模板实例创建属性。您可以访问模板实例作为事件映射函数的第二个参数。

Template.comment_item.created = function() {
  this.showChildren = false;
};

Template.comment_item.events({
  'click .comment-content': function(event, template) {
    template.showChildren = true;
  }
});

然而：

  1. 您无法从模板助手中访问您的模板实例及其属性。
  2. 无论如何，您的模板助手需要被赋予一个“反应性”数据源，以便它在现场进行更改。
  3. 即使您遇到了创建自己的响应式数据源的麻烦，您使用此功能的方法仍然会为页面上的 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 文档中的以下内容：

您声明为的模板<template name="foo"> ... </template> 可以作为函数 Template.foo 访问，该函数在调用时返回一个 HTML 字符串。

哦，你将上下文作为 JSON 对象传递给模板函数。例如：

var context = {_id: comment_id, text: "Comment text!"};
Template.comment_item(context);
于 2013-03-29T19:14:17.957 回答
7

更新：

Meteor 现在允许您从帮助程序中访问模板实例，使用Template.instance(). 事实上，这是增加模板可重用性的好方法。

下面的示例来源来自这篇文章，作者是 Percolate Studio 的 David Burles。

Template.hello.created = function () {
  // counter starts at 0
  this.state = new ReactiveDict();
  this.state.set('counter', 0);
}; 

Template.hello.helpers({
  counter: function () {
    return Template.instance().state.get('counter');
  }
});

Template.hello.events({
  'click button': function (event, template) {
    // increment the counter when button is clicked
    template.state.set('counter', template.state.get('counter') + 1);
  }
});

这篇文章很好地说明了为什么你会想要这种方法。

在模板实例中存储信息的优点是您可以使模板越来越模块化，并减少对它们使用位置的依赖。

于 2015-02-21T01:13:26.260 回答