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

Я пытаюсь переместить шаблон из 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.

Любые предложения будут ценны.


javascript html web-component polymer
person rlasch    schedule 03.02.2014    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Чтобы использовать содержимое пользовательского элемента (light dom), вам необходимо включить точку вставки в свой элемент (<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

person ebidel    schedule 03.02.2014
comment
Это именно то, чего мне не хватало. После того, как я перечитал документ о теневых поддеревьях DOM, он определенно стал более осмысленным. Огромное спасибо! - person rlasch; 04.02.2014
comment
@ebidel Возможно ли что-то подобное в Polymer 1.2+? stackoverflow.com/questions/34645114/ - person Zachary Moshansky; 12.01.2016