5

我正在尝试将模板从 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>

这是我的 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>

我似乎无法让 test.html 中的模板在 bt-sortable-list 自定义元素中使用。一般的想法是自定义元素将处理列表和其他事情，同时让使用该元素的 html 定义列表元素的显示方式。我已经尝试以编程方式添加模板，如图所示。我也试过在 bt-sortable-list 元素下没有模板。我还尝试使用内容元素来获取 test.html 中的模板内容。

任何建议将不胜感激。

4

1 回答 1

8

要使用自定义元素的 (light dom) 内容，您需要在元素 ( <content>) 中包含插入点：

http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees

但是，插入点纯粹是用于在 shadow DOM 中渲染节点的占位符。你所追求的有点不同，因为它使用 Polymer 的数据绑定功能来桥接 Polymer 元素外部的 light dom 世界和内部的 shadow dom 世界。

我能够通过动态创建<template>inready()并使用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);

演示：http: //jsbin.com/IVodePuS/3/edit

于 2014-02-03T16:50:09.433 回答