All geek questions in one place

Polymer: import and link patterns from another file

Can I import templates from another file? I can import javascript and stylesheet, but I can not understand how to import html templates.

For instance:

I defined various content element templates in templates.html

<template id="hello>Hello {{ li.name }}</template> <template id="hey">Hey!</template>

And then, I would like to reuse the templates in list.html

 <link rel="import" href="templates.html"> <polymer-element name="list" attributes="type,data"> <template> <template repeat="{{ li in items_in_data }}"> <template bind ref="hey"></template> <template bind ref="{{ type }}"></template> </template> </template> </polymer-element>

Finally in app.html

 <list data="items.json" type="hello"></list>

If I put the contents inside templates.html in list.html, it works fine. However, when using <link rel="import"> it does not load or link. Any ideas?

+5
source share
1 answer

Partial solution: works below in chrome, but not polyfill browsers (for example, firefox). You need to look at the polyfill code to figure out how to handle links in an already linked file.

The problem is that the contents of the import are not inserted into the document, but simply become available for use. See HTML5 Importing stones - using content for more details. You can find all the templates in the linked file and paste them into your fragment of the polymer element document:

 var importDoc = document.currentScript.ownerDocument; var link = importDoc.querySelector('.myimports'); var templates = link.import.querySelectorAll('template'); for (var i=0;i<templates.length;i++) { importDoc.head.appendChild(templates[i]); }

Example

demo templates.html

 <template id="hello">Hello World!</template> <template id="goodbye">See you tomorrow</template>

demo importTemplates-list.html

 <link class="myimports" rel="import" href="demo-templates.html"> <polymer-element name="demo-importTemplates-list"> <template> <template repeat="{{ li in data }}"> <h1>{{li}}</h1> <template bind ref="hello"></template> -- <template bind ref="goodbye"></template> </template> </template> <script> Polymer({ data: ['first','second','third'] }); // http://www.html5rocks.com/en/tutorials/webcomponents/imports/#usingcontent // http://www.html5rocks.com/en/tutorials/webcomponents/imports/#include-templates var importDoc = document.currentScript.ownerDocument; var link = importDoc.querySelector('.myimports'); var templates = link.import.querySelectorAll('template'); for (var i=0;i<templates.length;i++) { importDoc.head.appendChild(templates[i]); } </script> </polymer-element>

index.html

 <html lang="en"> <head> <script src="../../webcomponents/bower_components/webcomponentsjs/webcomponents.min.js"></script> <link rel="import" href="../../webcomponents/bower_components/polymer/polymer.html"> <link rel="import" href="demo-importTemplates-list.html"> <title>demo-importTemplates</title> </head> <body> <demo-importTemplates-list type="hello"></demo-importTemplates-list> </body> </html>
0
source

Source: https://habr.com/ru/post/1203450/

More articles:


All Articles