流星使用{{#each}}單擊事件的不同會話

Question

我想爲{{#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> 

的輔助方法和事件：

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出現在每篇文章中。我只是想爲我點擊的那個。

任何幫助將不勝感激。

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。