Teleport for Meteor's Blaze

Teleport renders your Blaze templates wherever you feel like!

<div class="some-deeply-nested-div">
  {{#Teleport destination='body'}}
    <h2>I will be rendered in document's body</h2>
  {{/Teleport}}
</div>

• Render stuff outside of your app's DOM tree.
• Handy for preventing style cascade or glitches with layering.
• Great for modals or dialogs.
• Tiny footprint. Well below 1kB compiled and minified.
• Has a logo.

How to install

$ meteor add arggh:teleport

How to use

Teleport will register a new Blaze template that is used as a block helper. Anything you put inside it will get magically teleported to the requested destination.

<template name="foo">
  {{#Teleport destination=target}}
    {{> TextBox content="bar"}}
  {{/Teleport}}
</template>

destination is optional and defaults to document.body. If provided, it should be either a DOM Element or a CSS selector.

<template name="modal">
  {{#Teleport destination='.fixed'}}
    <h1>I will end up inside .fixed</h1>
  {{/Teleport}}
</template>

<template name="tooltip">
  {{#Teleport destination=targetElement}}
    <h1>I will end up inside whatever is targetElement</h1>
  {{/Teleport}}
</template>

<template name="popover">
  {{#Teleport ''}}
    <h1>I will end up inside document.body</h1>
  {{/Teleport}}
</template>

Run the tests

If you want to contribute and improve the package, make sure to run the tests. Clone the package and run the following command:

$ TEST_WATCH=1 meteor test-packages ./ --driver-package meteortesting:mocha

License

Teleport is released under the MIT License.