How to import template in polymer?

127 views
Skip to first unread message

Антон Мирошниченко

unread,
Oct 28, 2014, 1:21:22 PM10/28/14
to polym...@googlegroups.com

I want create template libraray in isolated file.

./my-components/templates.html

<template id="overTemplate">
    <div on-mouseover="{{mouseOverHandler}}">OVER</div>
</template>
.....

And connect this file in my polymer-element:

<link rel="import" href="./my-components/templates.html">

Then use this template:

<template bind ref="overTemplate"></template>

How to do it?

Rob Dodson

unread,
Oct 30, 2014, 5:01:52 PM10/30/14
to Антон Мирошниченко, polymer-dev
You need to grab the contents out of your import and add them to the document (or I guess element if you're inside a polymer element). Here's an example: https://github.com/robdodson/ref-template-example

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/acfa3cec-bd3a-4852-b049-e4d2bfb02f8f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Антон Мирошниченко

unread,
Oct 31, 2014, 9:16:16 AM10/31/14
to polym...@googlegroups.com, soo...@gmail.com
Thanks!

пятница, 31 октября 2014 г., 0:01:52 UTC+3 пользователь Rob Dodson написал:

Антон Мирошниченко

unread,
Oct 31, 2014, 9:22:52 AM10/31/14
to polym...@googlegroups.com, soo...@gmail.com
Can i ask? ref attribute work only for templates in polymer-element shadow? Or can work in global dom?

пятница, 31 октября 2014 г., 16:16:16 UTC+3 пользователь Антон Мирошниченко написал:

Tomek W

unread,
Nov 17, 2014, 10:16:58 AM11/17/14
to polym...@googlegroups.com
Hi,

If you do not like to bother about importing and cloning documents, or would like to be more flexible on what to import, you can try one of our components:
https://github.com/Juicy/juicy-html - for stamping any HTML file
https://github.com/Juicy/imported-template - for dynamic importing (according to HTML Imports) templates 
Both support Polymer Tempalte Binding.

Thanks to them, instead of:

<link rel="import" href="./my-components/templates.html">
<template bind ref="overTemplate"></template>
You can write just:
<template is="imported-template" bind content="./my-components/templates.html"></template>
Best Regards,
Tomek

Антон Мирошниченко

unread,
Nov 19, 2014, 9:23:43 AM11/19/14
to polym...@googlegroups.com
Cool! Thanks!

понедельник, 17 ноября 2014 г., 18:16:58 UTC+3 пользователь Tomek W написал:
Reply all
Reply to author
Forward
0 new messages