Question

假设我有以下标记：

<div class="fild-group">
    <label for="form-users">User</label>
    <button type="button" class="inactive btn btn-default" data-id="form-users"><span>Select an User</span></button>
</div>
<div class="fild-group to-hide">
    <label for="form-projects">Projects</label>
    <button type="button" class="inactive" data-id="form-projects"><span>Select a Project</span></button>
</div>
<div class="fild-group to-hide">
    <label for="form-parallel-env">Parallel Environment</label>
    <button type="button" class="inactive" data-id="form-parallel-env"><span>Select a PE</span></button>
</div>
<div class="fild-group to-hide">
    <label for="form-start-date">Start Date</label>
    <button type="button" class="inactive" data-id="date1"><span>Select a Date</span></button>
</div>
<div class="fild-group to-hide">
    <label for="form-end-date">End Date</label>
    <button type="button" class="inactive" data-id="date2"><span>Select a Date</span></button>
</div>
<div class="fild-group to-hide">
<label for="form-no-slots">Number of slots</label>
    <button type="button" class="inactive btn" data-id="form-slots"><span>Slots</span></button>
    <input type="number" class="form-control" id="form-no-slots" min="1" max="9999">
</div>

取决于用户所在的位置，我想展示一些，全部或不显示这些div.fild-group所以我只想创建一个这样的模板

<template name="first-line-button">
    <div class="fild-group">
        <label for="{{ id }}">{{ label }}</label>
        <button type="button" class="inactive btn btn-default " data-id="{{ data }}"><span>{{ message }}</span></button>
    </div>
</template>

但到目前为止我知道如何在一件事情上使用该模板，所以问题是如何在同一时间将这个模板用于多个事物???

提前感谢！

Answer 1

您需要为要呈现的模板提供数据上下文。您可以单独执行此操作，也可以传递一组按钮数据。

Template.parent.formUsers = function () {
  return {
    id: "for-users",
    label: "User",
    message: "Select a User"
  }
};

或

Template.parent.formButtons = function () { return [{ id: "form-users", label: "User", message: "Select a User" }, { id: "form-projects", label: "Projects", message: "Select a Project" }, { ... }] };

parent模板会在某处显示此内容。

{{> first-line-button formUsers}}

或

{{#each formButtons}} {{> first-line-button}} {{/each}}

如何同时为不同的事物多次重新渲染模板

1 个答案: