https://github.com/arggh/blaze-teleport

Teleporting capabilities for Meteor's Blaze
https://github.com/arggh/blaze-teleport

Last synced: 5 days ago
JSON representation

Teleporting capabilities for Meteor's Blaze

• Host: GitHub
• URL: https://github.com/arggh/blaze-teleport
• Owner: arggh
• License: mit
• Created: 2017-11-07T09:41:26.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-01-10T08:06:32.000Z (almost 6 years ago)
• Last Synced: 2024-02-12T05:38:16.003Z (9 months ago)
• Language: JavaScript
• Homepage:
• Size: 69.3 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-blaze - arggh:teleport - Render templates anywhere in the DOM.  (Uncategorized / Uncategorized)

README

        



Teleport for Meteor's Blaze


**Teleport** renders your Blaze templates wherever you feel like!

```handlebars



  {{#Teleport destination='body'}}

    
I will be rendered in document's body

  {{/Teleport}}



```


- 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

```bash

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

```handlebars

  {{#Teleport destination=target}}

    {{> TextBox content="bar"}}

  {{/Teleport}}

```

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

```handlebars

  {{#Teleport destination='.fixed'}}

    
I will end up inside .fixed

  {{/Teleport}}


```

```handlebars

  {{#Teleport destination=targetElement}}

    
I will end up inside whatever is targetElement

  {{/Teleport}}


```

```handlebars

  {{#Teleport ''}}

    
I will end up inside document.body

  {{/Teleport}}


```

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

```bash

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

```

## License

Teleport is released under the [MIT License](http://opensource.org/licenses/MIT).