Использование шаблона, определенного в свете dom внутри элемента Polymer

Я пытаюсь получить шаблон, перемещенный из DOM внутри элемента.Использование шаблона, определенного в свете dom внутри элемента Polymer

Вот мои элементы:

<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 для использования внутри Б.Т. -sortable-list. Общая идея заключается в том, что пользовательский элемент обрабатывает список и другие вещи, позволяя html, который использует этот элемент, определять, как будет отображаться элемент списка. Я попытался программно добавить шаблон, как показано. Я также попробовал не иметь шаблон под элементом bt-sortable-list. Я также попытался использовать элемент содержимого, чтобы получить содержимое шаблонов в test.html.

Любые предложения были бы весьма полезными.

источник

2014-02-03 rlasch

Чтобы использовать (легкий РОМ) содержание пользовательского элемента вам необходимо включить точку вставки в элементе (<content>):

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

Однако точки вставки являются чисто заполнители для визуализации узлов в теневой DOM. То, что вам нужно, немного отличается, потому что оно использует функции привязки данных Polymer, чтобы объединить мир светлых домов за пределами вашего элемента Polymer, и внутри него находится теневой дом.

Я был в состоянии получить вещи, работающие за счет динамического создания <template> в 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);

Демо: http://jsbin.com/IVodePuS/3/edit

источник

2014-02-03 16:50:09 ebidel

Это именно то, что мне не хватало. После того, как я перечитал документ в теневых поддеревях DOM, это определенно имело больше смысла. Спасибо! – rlasch

@ebidel Что-то вроде этого все еще возможно в Polymer 1.2+? https://stackoverflow.com/questions/34645114/polymer-dom-repeat-binding-to-content –

Использование шаблона, определенного в свете dom внутри элемента Polymer

ответ

Смежные вопросы