Skip to content

Instantly share code, notes, and snippets.

@alecf

alecf/index.html

Created February 5, 2015 00:59
Show Gist options
  • Save alecf/1f2dd0936d5b942381d1 to your computer and use it in GitHub Desktop.
Save alecf/1f2dd0936d5b942381d1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel='import' href='http://www.polymer-project.org/components/polymer/polymer.html'>
<link rel='import' href='http://www.polymer-project.org/components/paper-button/paper-button.html'>
</head>
<body>
<polymer-element name="magic-container">
<template>
<style>
div.row {
border: 1px solid green;
}
</style>
<template if="{{templateInjected}}">
<template repeat="{{row in data}}">
<div class="row">[Container Row]
<template ref="outer-template-element" bind="{{}}">
</template>
</div>
</template>
</template>
</template>
<script>
Polymer({
publish: {
data: [],
templateInjected: false,
},
onButtonClick: function(e) {
console.log("BAD: Got click in the magic-container")
},
domReady: function() {
// pull the template down from the container
this.templateStamp = this.querySelector('template');
this.shadowRoot.appendChild(this.templateStamp);
// We have to tickle this to get the template to re-render the
// the new template.
this.templateInjected = true;
}
});
</script>
</polymer-element>
<polymer-element name="magic-app">
<template>
<div>Container here:<div>
<magic-container id="container" data="{{data}}">
<template id="outer-template-element">
<div>
Click the button:
<paper-button on-click="{{onButtonClick}}">
Button {{row.value}}
</paper-button>
</div>
</template>
</magic-container>
</template>
<script>
Polymer({
publish: {
data: []
},
onButtonClick: function(e) {
console.log("GOOD: Got click in the magic-app")
}
});
</script>
</polymer-element>
App here:
<magic-app id="app"></magic-app>
<script>
document.querySelector('#app').data = [
{value: 1},
{value: 2},
{value: 3},
];
</script>
Now a button here: <paper-button>whee</paper-button>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel='import' href='http://www.polymer-project.org/components/polymer/polymer.html'>
<link rel='import' href='http://www.polymer-project.org/components/paper-button/paper-button.html'>
</head>
<body>
<polymer-element name="magic-container">
<template>
<style>
div.row {
border: 1px solid green;
}
</style>
<template if="{{templateInjected}}">
<template repeat="{{row in data}}">
<div class="row">[Container Row]
<template ref="outer-template-element" bind="{{}}">
</template>
</div>
</template>
</template>
</template>
<script>
Polymer({
publish: {
data: [],
templateInjected: false,
},
onButtonClick: function(e) {
console.log("BAD: Got click in the magic-container")
},
domReady: function() {
// pull the template down from the container
this.templateStamp = this.querySelector('template');
this.shadowRoot.appendChild(this.templateStamp);
// We have to tickle this to get the template to re-render the
// the new template.
this.templateInjected = true;
}
});
<\/script>
</polymer-element>
<polymer-element name="magic-app">
<template>
<div>Container here:<div>
<magic-container id="container" data="{{data}}">
<template id="outer-template-element">
<div>
Click the button:
<paper-button on-click="{{onButtonClick}}">
Button {{row.value}}
</paper-button>
</div>
</template>
</magic-container>
</template>
<script>
Polymer({
publish: {
data: []
},
onButtonClick: function(e) {
console.log("GOOD: Got click in the magic-app")
}
});
<\/script>
</polymer-element>
App here:
<magic-app id="app"></magic-app>
<script>
document.querySelector('#app').data = [
{value: 1},
{value: 2},
{value: 3},
];
<\/script>
Now a button here: <paper-button>whee</paper-button>
</body>
</html>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment