CODEWITHSUNDEEP
polymer
kysonic
kysonic

Reputation: 147

How to import template in polymer?

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?

Upvotes: 0

Views: 439

Answers (2)

Brandon
Brandon

Reputation: 570

The above does not work with Polymer 1.0 as template annotation bindings are no longer dynamic based on DOM modifications. There is a tag, currently a stop gap until the Polymer team provides that ability, that attempts to provide reference templates.

Upvotes: 1

sesteva
sesteva

Reputation: 1776

How about?

var link = document.querySelector('link[rel=import]');
var content = link.import.querySelector('#overTemplate');
document.body.appendChild(document.importNode(content, true));

Credits to Mr 'Polymer' Dodson... http://robdodson.me/blog/2013/08/20/exploring-html-imports/

Polymer has a helper called import but as far as I can tell it is ready to import polymer-elements only.

Upvotes: 0

Related Questions