流星：在特定上下文中渲染模板

Question

我有兩個模板

<body>
    {{>tmpl1}}
    {{>tmpl2}}
    ....
</body>

在tmpl1中，我有一個項目列表，可以單擊。 單擊一個時，tmpl2顯示詳細信息。 如何實現呢？

因此，為了使您的想法更清晰，這是我獲取項目清單的方式

Template.tmpl1.items = function () {
    return Items.find({}).fetch();
};

tmpl1它們顯示如下

<template name="tmpl1">
    {{#each items}}
        {{title}}
    {{/each}}
    ....
</template>

所以tmpl2模板可能看起來像這樣

<template name="tmpl1">
    <h1>{{title}}</h1>
    <p>{{content}}</p>
</template>

任何建議如何將tmpl1的所選項目與tmpl2 ？

Answer 1

首先，將模板放在容器中，以便您可以操縱上下文。 另外，將詳細信息模板放在#with上下文中：

<template name="box">
  {{> list}}
  {{#with item}}
    {{> details}}
  {{/with}}
</template>

現在，為box模板添加事件處理程序。 假設您在list的輸入如下所示：

<div class="listItem" data-id="{{_id}}">{{title}}</div>

編寫處理程序：

Template.box.events({
  'click .listItem': function(e, t) {
    t.data.itemId = $(e.target).data('id');
    t.data.itemDep.changed();
  }
});

最后，為所選項目創建數據助手和依賴項：

Template.box.created = function() {
  this.data.itemDep = new Deps.Dependency();
};

Template.box.item = function() {
  this.itemDep.depend();
  return Items.findOne(this.itemId);
};

流星：在特定上下文中渲染模板

問題描述

1 個解決方案

解決方案1
3 已采納 2014-03-17 16:19:26

流星：在特定上下文中渲染模板

問題描述

1 個解決方案

解決方案1 3 已采納 2014-03-17 16:19:26

解決方案1
3 已采納 2014-03-17 16:19:26