How to displace/transfer a template from one DIV to another without losing its any helper function or data


#1

Is there any way to change the position of a template from one container to another on triggering an event. without destroying/ Re-rendering it?

Suppose I have 2 DIVs as DIV-1 and DIV-2, I have already rendered a template in DIV-1. Now on the click event of a button I just want to copy the code of that template from DIV-1 and paste it into DIV-2 without destroying that template. What should I do??

e.g.
<button> Swap Template DIVs </button>

<div id="DIV-1">
{{> MyTemplate}}
</div>

<div id="DIV-2">
<!-- Template should be added here on click event -->
</div>


#2

I’m not sure its possible directly in Meteor. Of course you could do it in JQuery or native javascript. If your template has an existing reactive data state, and you are not altering the data state, destroying/recreating the template (if its not overly complex) should not be too expensive for overhead, and would give you the result. Also I think you would have to abandon any reactivity within the template view you are trying to move. Meteor will try to “fix” the missing template, and re-render new one if there is any reactivity.

So I think the two options are:

  1. Don’t make it reactive, and use JQuery
  2. Trust your reactivity/Meteor Tracker, and just destroy/recreate.