以下是我的元素：
< link rel =importhref =../ polymer / polymer.html> < link rel =importhref =../ polymer-ui-icon / polymer-ui-icon.html> < polymer-element name =bt-sortable-listattributes =drag name list> < template> BOOM < template binding ref =itemTemplaterepeat ={{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>以下是我的html文件：
<！doctype html> < html> < head> < script src =/ platform / platform.js>< / script> < link rel =importhref =/ bt-sortable-list / bt-sortable-list.html> < / head> < body> < h3>可排列列表< / h3> < bt-sortable-list> < template 名称{{name}} < / template> < / bt-sortable-list> < / body> < / html>我似乎无法获得test.html中的模板以用于bt-可排序列表自定义元素。一般的想法是，自定义元素将处理列表和其他事物，同时让使用元素的html定义列表元素将如何显示。我试着以编程方式添加模板，如图所示。我也试过没有bt-sortable-list元素下的模板。我也尝试使用内容元素来获取test.html中的模板内容。
任何建议都将不胜感激。
解决方案（light dom）自定义元素的内容，您需要在元素中包含插入点（< content> ）：
www.polymer-project/platform/ shadow-dom.html＃shadow-dom-subtrees
然而，插入点纯粹是用于渲染阴影DOM节点的占位符。你所追求的有点不同，因为它使用了Polymer的数据绑定功能来桥接聚合物元素之外的光环世界，以及其中的影子世界。
<我可以通过在 ready（）中动态创建< template> >并使用 ref 来引用它： 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）;演示： jsbin/IVodePuS/3/edit
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.
解决方案To use the (light dom) content of a custom element you need to include an insertion point in your element (<content>):
www.polymer-project/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: jsbin/IVodePuS/3/edit
更多推荐
使用聚合物元素中的light dom定义的模板
发布评论