Question

我想在{{#each}}块中为特定点击事件使用不同的会话。问题是将为所有{{#each}}块成员显示HTML元素，但我只想要它，用户执行click事件。

这是我的代码：

  ...
            {{#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>

帮手方法和事件：

Template.article.helpers({
    editArticle: function() {
        return Session.equals('editArticle', true);
    }
});

在带有{{#each}}块的模板中，我使用了这个辅助方法：

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

现在问题是，如果我点击按钮.edit-article，每篇文章上都会显示{{#if editArticle}}块。我只想要它点击的那个。

非常感谢任何帮助。

Answer 1

这是Session在模板反应性方面始终不是正确工具的完美示例。除非您确实需要知道在模板之外编辑哪篇文章，否则我强烈建议您使用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才能使用此功能。有关详细信息，请参阅scoped reactivity上的帖子。

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

1 个答案: