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?

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/26614469/how-to-import-template-in-polymer