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);
};

meteor：在特定上下文中呈现模板

1 个答案: