Menu
I'm trying to get a template moved from the DOM to inside the element.
Here is my elements:
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html">
<polymer-element name="bt-sortable-list" attributes="drag name list">
<template>
BOOM
<template binding ref="itemTemplate" repeat="{{list}}" id="repeatTemplate">
</template>
<template id="itemTemplate">
</template>
</template>
<script>
Polymer('bt-sortable-list', {
ready: function() {
var div = document.createElement('div');
contentStr = this.trim(innerHTML);
var parsed = markdown.toHTML(content);
this.$.itemTemplate.innerHTML = parsed;
this.list = [{name: 'Item 1', id: 'item1'}, {name: 'Item 2', id: 'item2'}, {name: 'Item 3', id: 'item3'}];
this.$.repeatTemplate.model = this.list;
}
});
</script>
</polymer-element>
And here is my html file:
<!doctype html>
<html>
<head>
<script src="/platform/platform.js"></script>
<link rel="import" href="/bt-sortable-list/bt-sortable-list.html">
</head>
<body>
<h3>Sortable List</h3>
<bt-sortable-list>
<template
Name {{name}}
</template>
</bt-sortable-list>
</body>
</html>
I can't seem to get the template in test.html to be used inside of the bt-sortable-list custom element. The general idea is that the custom element will handle the list and other things, while letting the html that is using the element to define how a list element will be displayed. I've tried programmatically adding the template as shown. I've also tried not having the template under the bt-sortable-list element. I've also tried using a content element to get the templates contents in test.html.
Any suggestions would be greatly appreciated.
520
Abstract. Template polymerization is defined as a process of polymer synthesis in which the monomer units are organized by a preformed macromolecule (template) and refers to one phase systems in which the monomer and template are soluble in the same solvent.
The dom-module element registers the dom it contains to the name given by the module's id attribute. It provides a unified database of dom accessible via its static import API.
To use the (light dom) content of a custom element you need to include an insertion point in your element (<content>):
http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees
However, insertion points are purely placeholders for rendering nodes in the shadow DOM. What you're after is a bit different because it's using Polymer's data binding features to bridge the light dom world outside of your Polymer element, with the shadow dom world inside of it.
I was able to get things working by dynamically creating the <template> in ready() and using ref to reference it:
var t = document.createElement('template');
t.id = 'itemTemplate';
t.innerHTML = this.innerHTML;
this.list = [{name: 'Item 1', id: 'item1'},
{name: 'Item 2', id: 'item2'},
{name: 'Item 3', id: 'item3'}];
this.shadowRoot.appendChild(t);
Demo: http://jsbin.com/IVodePuS/3/edit
174
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
