Javascript Meteor使用不同的会话{{#each}进行点击事件

我想对

{{{each}

块中的特定点击事件使用不同的会话。问题是，所有

{{{each}}

块成员都将显示HTML元素，但我只希望用户对其中一个成员执行单击事件

这是我的密码：

  ...
            {{#each articles}}
              <tr id="{{_id}}" class="article-row">
                   <td class="articles">
                          {{> article}}
                   </td>
             </tr>
           {{/each}}
  ...



  <template name="article">
        {{#if editArticle}}
            <div class="input-group">
                <span class="input-group-addon">Edit article</span>
                <input type="text" name="edit-article-input" class="form-control" placeholder="Name your article." value="{{title}}">
                <span class="input-group-btn">
                    <button class="btn btn-success glyphicon glyphicon-ok edit-article-submit" data-type="last"></button>
                </span>
            </div>
        {{else}}
            <div class="panel panel-default article">
                <div class="panel-heading">
                    <h3 class="panel-title">{{title}}</h3>
                </div>
                <div class="panel-body">
                        <button class="glyphicon glyphicon-pencil btn btn-default btn-xs edit-article"></button>
                </div>
            </div>
        {{/if}}
    </template>

在带有

{{{each}

块的模板中，我使用以下帮助器方法：

'click .edit-article': function(e, t) {
        e.preventDefault();
        Session.set('editArticle', true);
}

现在的问题是，如果我点击按钮

.edit article

，

{{{#if edittarticle}}

块会出现在每篇文章上。我只想要我点击的那个

---

任何帮助都将不胜感激。

这是一个完美的例子，说明了当涉及到模板反应时，

会话并不总是合适的工具。除非您确实需要知道模板外正在编辑的文章，否则我强烈建议使用
ReactiveVar
或
ReactiveDict
而不是像
Session
这样的全局变量。写起来有点多，但在我看来，这是一个更加封装和优雅的解决方案。以下是您需要的代码概要：

Template.article.created = function() {
  this.isEditing = new ReactiveVar(false);
};

Template.article.events({
  'click .edit-article': function(e, template) {
    e.preventDefault();
    template.isEditing.set(true);
  },
  submit: function(e, template) {
    e.preventDefault();
    template.isEditing.set(false);
  }
});

Template.article.helpers({
  editArticle: function() {
    return Template.instance().isEditing.get();
  }
});

请注意，您需要执行
meteor add reactive var
，才能使其正常工作。有关更多详细信息，请参阅我在上的帖子

Template.article.created = function() {
  this.isEditing = new ReactiveVar(false);
};

Template.article.events({
  'click .edit-article': function(e, template) {
    e.preventDefault();
    template.isEditing.set(true);
  },
  submit: function(e, template) {
    e.preventDefault();
    template.isEditing.set(false);
  }
});

Template.article.helpers({
  editArticle: function() {
    return Template.instance().isEditing.get();
  }
});