Skip to content

Instantly share code, notes, and snippets.

@ebidel ebidel/example.html
Last active Nov 29, 2015

What would you like to do?
Polymer 0.5: reference an external <template> and use it for data binding
<!--,output -->
<script src=""></script>
<script src=""></script>
<link rel="import" href="templates.html" id="templates">
<polymer-element name="foo-bar">
<div id="container"></div>
<template if="{{showDefault}}">
default content template
showDefault: true,
attached: function() {
var template = this.querySelector('template');
if (template) {
// Allow Polymer expressions in the template's {{}}.
if (!template.bindingDelegate) {
template.bindingDelegate = this.element.syntax;
var instance = template.createInstance({foo: 5});
this.showDefault = false;
<template ref="layout">
<b>another</b> content template. Also supports data: {{foo}}
<!-- -->
<template id="layout">
layout template from another file! data: {{foo}}
// This import.
var thisDoc = document._currentScript.ownerDocument;
// <template> in this import.
var layoutTemplate = thisDoc.querySelector('#layout');
// Make a clone of the template.
var clone = document.importNode(layoutTemplate, true);
// Add it to the main document for others to use.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.