클릭 이벤트에 대해 {{#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> 

도우미 방법 및 이벤트 : 지금

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

:이 도우미 메서드를 사용 {{#each}} 블록 템플릿에서

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

문제는 버튼을 클릭하면 .edit-article{{#if editArticle}} blo입니다. ck가 모든 기사에 나타납니다. 나는 단지 내가 클릭 한 것에 대해 그것을 원한다.

도움을 주시면 감사하겠습니다.

Answer 1

이것은 반응 반응성과 관련하여 Session이 항상 적절한 작업 도구가 아닌 방법의 완벽한 예입니다. 어떤 문서가 템플릿 외부에서 편집되고 있는지 실제로 알 필요가없는 한 Session과 같은 전역 변수 대신 ReactiveVar 또는 ReactiveDict을 사용하는 것이 좋습니다. 필자의 의견으로는 더 많이 캡슐화되고 우아한 솔루션을 작성하는 것이 더 많습니다. 이 작업 할 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(); 
    } 
}); 

참고 : 여기 당신이 필요로하는 것 코드의 개요입니다. 자세한 내용은 내 게시물 scoped reactivity을 참조하십시오.