Question

我的问题可能很容易解决，到目前为止我还没有成功......

我尝试创建一个文章列表，只有一个名字。

第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

让你的模板名称为articles，然后它就像这样。在你的每个循环中，你不需要写article.name，它只是{{} 1}}

name

Answer 2

好吧，最好的事情是封装到模板中，并使用反应变量（meteor add reactive-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

循环模板和事件

2 个答案: