使用在Polymer元素內的light dom中定義的模板

Question

我正在嘗試將模板從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中的模板內容。

任何建議將不勝感激。

Answer 1

要使用自定義元素的（light dom）內容，您需要在元素中包含插入點（ <content> ）：

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

但是，插入點純粹是占位符，用於在shadow DOM中呈現節點。 您所追求的是有點不同，因為它使用Polymer的數據綁定功能來橋接您的Polymer元素之外的光dom世界，其中包含陰影dom世界。

我能夠通過在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);

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

使用在Polymer元素內的light dom中定義的模板

問題描述

1 個解決方案

解決方案1
8 已采納 2014-02-03 16:50:09

使用在Polymer元素內的light dom中定義的模板

問題描述

1 個解決方案

解決方案1 8 已采納 2014-02-03 16:50:09

解決方案1
8 已采納 2014-02-03 16:50:09