流星使用{{#each}}单击事件的不同会话

Z时代
2024-01-10
分类：问答

我想为{{#each}}块内的特定点击事件使用不同的会话。问题是所有{{#each}}块成员都会显示HTML元素，但我只希望为其中一个用户执行点击事件。流星使用{{#each}}单击事件的不同会话

这里是我的代码：

... 
      {{#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}} blo ck出现在每篇文章中。我只是想为我点击的那个。

任何帮助将不胜感激。

回答：

这是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(); 
    } 
});