流星：單擊時將模板渲染到DOM

Question

我遇到了一個看似簡單的問題，但我找不到真正的解決方案。 我有2列：一欄概述了不同的任務，一欄則是單擊每個任務所附的“更多信息”按鈕時應顯示有關該任務的詳細信息的區域。 我的邏輯是：

有2個模板：task_short和task_long
單擊task_short中的按鈕后，使用Blaze.render將task_long渲染為第二列中的div。
當在另一個task_short上單擊“更多信息”時，使用Blaze.remove刪除視圖。

我的主要問題是：如何告訴Meteor應該在task_long中呈現哪個任務？ task_short通過每個任務循環獲取其{{content}}，{{name}}等參數。 但是，我該如何完成一項任務？ 另外，我不太了解Blaze.remove。 我需要從哪里傳遞ViewId？

我非常感謝您的幫助！

Answer 1

這可以通過會話變量和模板中的一些條件來解決。 除非您確實在做一些花哨的事情，否則您無需使用Blaze.render / Blaze.remove 。 我不知道您的模板的確切結構，但是此示例應為您提供如何做的想法：

app.html

<body>
  {{#each tasks}}
    {{> task}}
  {{/each}}
</body>

<template name="task">
  <div class='short'>
    <p>Here are the short instructions</p>
    <button>More information</button>
  </div>
  {{#if isShowingLong}}
    <div class='long'>
      <p>Here are the long instructions</p>
    </div>
  {{/if}}
  <hr>
</template>

app.js

if (Meteor.isClient) {
  Template.body.helpers({
    tasks: function () {
      // return some fake data
      return [{_id: '1'}, {_id: '2'}, {_id: '3'}];
    }
  });

  Template.task.helpers({
    isShowingLong: function () {
      return (this._id === Session.get('currentTask'));
    }
  });

  Template.task.events({
    'click button': function () {
      Session.set('currentTask', this._id);
    }
  });
}

流星：單擊時將模板渲染到DOM

問題描述

1 個解決方案

解決方案1
2 2014-11-17 19:19:42

app.html

app.js

流星：單擊時將模板渲染到DOM

問題描述

1 個解決方案

解決方案1 2 2014-11-17 19:19:42

app.html

app.js

解決方案1
2 2014-11-17 19:19:42