Skip to content

Instantly share code, notes, and snippets.

@ebidel
Last active May 1, 2021 15:42
Show Gist options
  • Save ebidel/2e8b68f2a3747a9f473d to your computer and use it in GitHub Desktop.
Save ebidel/2e8b68f2a3747a9f473d to your computer and use it in GitHub Desktop.
Polymer 0.5: reference an external <template> and use it for data binding
<!-- http://jsbin.com/rageqilava/1/edit?html,output -->
<script src="http://www.polymer-project.org/webcomponents.min.js"></script>
<script src="http://www.polymer-project.org/polymer.min.js"></script>
<link rel="import" href="templates.html" id="templates">
<polymer-element name="foo-bar">
<template>
<div id="container"></div>
<template if="{{showDefault}}">
default content template
</template>
</template>
<script>
Polymer({
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.$.container.appendChild(instance);
this.showDefault = false;
}
}
});
</script>
</polymer-element>
<foo-bar>
<template ref="layout">
<b>another</b> content template. Also supports data: {{foo}}
</template>
</foo-bar>
<!-- http://jsbin.com/pefuduhucu/1/quiet -->
<template id="layout">
layout template from another file! data: {{foo}}
</template>
<script>
// 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.
document.body.appendChild(clone);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment