環模板和事件

Question

我的問題可能很容易解決的，我一直沒succesfull那麼遠，

我嘗試創建的文章列表，只有一個名字。

---

第1條

[按鈕顯示更多]

---

第2條

[按鈕顯示更多]

---

第3條

[按鈕查看更多]

---

...

The code looks like this : 

{{#each article in articleSet} 

<button value= {{ article.name }} </button> 

// I want to load a template here of the article, when the button is clicked 

{{ if condition = true}} 
    {{ > getArticle article=this.article }} 
{{/if}} 

{{/each}} 

我的問題：我只想要點擊的按鈕來呈現在他的文章，不是全部。我如何才能在點擊哪個按鈕和呈現模板的位置之間建立邏輯關係？

非常感謝您

Answer 1

好，最好的辦法是封裝成模板，並使用無功瓦爾（流星增加無功VAR）

然後代碼明智

Template.articles.helpers({ 
    articleSet() { 
     return [ 
     { 
      name: "Article 1", 
      text: "blah blah blah" 
     }, 
     { 
      name: "Article 2", 
      text: "waffle waffle waffle" 
     } 
     ] 
    } 
    }) 

    Template.article.onCreated(function(){ 
    this.displayDetails = new ReactiveVar(false); 
    }) 
    Template.article.helpers({ 
    displayDetails() { 
     return Template.instance().displayDetails.get(); 
    } 
    }) 
    Template.article.events({ 
    "click .showDetails": function(event, template) { 
     template.displayDetails.set(!template.displayDetails.get()); 
    } 
    }) 

和HTML

<template name="articles"> 
    <div> 
    {{#each articleSet}} 
     {{> article}} 
    {{/each}} 
    </div> 
</template> 

<template name="article"> 
    <div>{{name}}</div> 
    {{#if displayDetails}} 
    <div>{{text}}</div> 
    {{/if}} 
    <button class="showDetails">Show</button> 
</template> 

看到meteorpad

Answer 2

讓你的模板名稱是articles，那麼它會在你的火焰像this.And每個循環中，你不需要寫article.name，這將會是剛剛name

Template.articles.events({ 
    'click button' : function() { 
     console.log(this.name); // it would print your button value,basically this refers to the article object which gets clicked 
     // load your article here 
    } 
});