Last active
August 29, 2015 14:14
-
-
Save tomalec/cdfe71102064b9858e18 to your computer and use it in GitHub Desktop.
"binding prior to Polymer" issue for async HTML Imports
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- working example: http://jsbin.com/boloxo/1/edit --> | |
| <head> | |
| <script src="../../../webcomponentsjs/webcomponents.js"></script> | |
| <link rel="import" href="../../../polymer/polymer.html"> | |
| </head> | |
| <body> | |
| <div id="stampHere"></div> | |
| </body> | |
| <script> | |
| (function () { | |
| var element = document.getElementById("stampHere"); | |
| // create new HTML Import | |
| var link = document.createElement('link'); | |
| link.rel = "import"; | |
| link.href = "./template.html"; | |
| link.onload = function(){ | |
| // Insert template into DOM. | |
| var template = this.import.querySelector("template"); | |
| var importedTemplate = document.importNode(template, true); | |
| if(window.PolymerExpressions) { | |
| importedTemplate.bindingDelegate = new PolymerExpressions(); //use PolymerExpressions if available. This allows <template if="{{val == 1}}">, etc | |
| } | |
| element.appendChild(importedTemplate); | |
| // attach model | |
| importedTemplate.model = { | |
| "list": { | |
| "key": "Works" | |
| } | |
| }; | |
| }; | |
| // guessed workaround for Polymer/polymer#554, http://crbug.com/389566 | |
| setTimeout( function appendAsync(){ | |
| document.head.appendChild(link); | |
| }); | |
| })(); | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :host h1 { | |
| color: blue; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- working example: http://jsbin.com/kijepu/2/edit --> | |
| <link rel="import" href="../../../polymer/polymer.html"/> | |
| <polymer-element | |
| name="my-element" | |
| attributes="header data"> | |
| <template> | |
| <!-- Remove this styleshhet to make it work --> | |
| <link rel="stylesheet" href="my-element.css"/> | |
| <h1>{{header}} / {{data}} / {{data.key}}</h1> | |
| </template> | |
| <script> | |
| Polymer('my-element', { | |
| }); | |
| </script> | |
| </polymer-element> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- working example: http://jsbin.com/fibeji/1/edit --> | |
| <link rel="import" href="my-element.html"> | |
| <template bind> | |
| <my-element | |
| header="Binding" | |
| data="{{list}}"></my-element> | |
| </template> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment