Javascript 在聚合物元素内使用light dom中定义的模板_Javascript_Html_Polymer_Web Component

Javascript 在聚合物元素内使用light dom中定义的模板

javascript html polymer

Javascript 在聚合物元素内使用light dom中定义的模板,javascript,html,polymer,web-component,Javascript,Html,Polymer,Web Component,我试图将一个模板从DOM移动到元素内部以下是我的要点： <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

我试图将一个模板从DOM移动到元素内部

以下是我的要点：

<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>


繁荣
聚合物（'bt-sortable-list'{
就绪：函数（）{
var div=document.createElement（'div'）；
contentStr=this.trim（innerHTML）；
var parsed=markdown.toHTML（内容）；
此.$.itemTemplate.innerHTML=已解析；
this.list=[{name:'Item 1'，id:'Item 1'}，{name:'Item 2'，id:'Item 2'}，{name:'Item 3'，id:'Item 3'}]；
this.$.repeatTemplate.model=this.list；
}
});

这是我的html文件：

<!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>


可排序列表
要使用自定义元素的（light dom）内容，您需要在元素中包含插入点（
）：

但是，插入点纯粹是用于在阴影DOM中渲染节点的占位符。您所追求的有点不同，因为它使用Polymer的数据绑定特性来连接Polymer元素外部的光dom世界，而阴影dom世界则在其中
通过在ready（）
中动态创建
，并使用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);

演示：
这正是我所缺少的。在我重读了shadowdom子树上的文档之后，它肯定更有意义。非常感谢@ebidel在聚合物1.2+中仍然是这样的吗？