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

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