CODEWITHSUNDEEP
javascripthtmldommeteor
knownasilya
knownasilya

Reputation: 6143

Re-rendering/swapping templates after being removed from DOM

At the moment I have the following layout:

<div id="main">
    {{> my_template}} 
</div>

Now later on I have a selector $("#main") and I use html(..) to change the content to display a record from a collection.

So now maybe it looks like so:

<div id="main">
    <h1>A title...</h1>
    <p>some text</p>
</div>

Or maybe like so (If I knew how):

<div id="main">
    {{> another_template}} 
</div>

What is the proper way of doing this so I can get my my_template re-rendered/swapped-out for other templates? Do I have to use Meteor.render? How can I do this?

Edit:
I need some more clarification on doing this with a template that only has HTML and no reactive templating variables. How does that get enabled/disabled using the Session?

<template name="newForm">
    <form>
        <input..>
        <textarea..></textarea>
        <!-- more fields.. -->        
    </form> 
</template>

How would I use Template.newForm to hide this? Should I still be using Template for this situation?

Upvotes: 0

Views: 412

Answers (1)

Rahul
Rahul

Reputation: 12231

You can just put all the alternate templates next to each other:

<div id="main">
    {{> my_template}} 
    {{> another_template}}
    {{> yet_another_template}}
</div>

And just ensure in your code that you only show one of them at a time. For instance:

Template.my_template = function() {
  if (Session.equals("template_to_show", "my_template")) {
    return SomeCollection.find();
  }
}
Template.another_template = function() {
  if (Session.equals("template_to_show", "another_template")) {
    return SomeOtherCollection.find();
  }
}
// etc

Upvotes: 2

Related Questions