CODEWITHSUNDEEP
meteormeteor-blaze
juanp_1982
juanp_1982

Reputation: 1007

how to rerender a template several times for different things at the same time

lets say I have the following markup:

<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>

depending on where the user is I would like to show some, all or none of these div.fild-group so I was thinking to create ONLY one template like this

<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>

but so far I know how to use that template for one thing at the time, so the question is how can I use this single template for multiple things at the same time???

thanks in advance!

Upvotes: 0

Views: 41

Answers (1)

Neil
Neil

Reputation: 2147

You need to provide a data context for the template to render. You can do that individually, or pass an array of button data.

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

or

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

And the parent template would have this in it somewhere.

{{> first-line-button formUsers}}

or

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

Upvotes: 1

Related Questions