Включение элемента

Есть ли что-то вроде атрибута transclude директивы angularjs в полимере? Что-то, что позволяет мне включать некоторые элементы в определенное место в шаблоне?

Я хотел бы добиться чего-то вроде следующего:

<my-header title="My title">
    <my-header-item name="Item 1"></my-header-item>
    <my-header-item name="Item 2"></my-header-item>
</my-header>

что может быть выражено:

<h1>My title</h1> <!-- "My title" given by my-header's title attribute -->
<ul>
    <li>Item 1 <!-- given by my-header-item -->
    <li>Item 2
</ul>

Я не уверен, это задача для полимера или это типичный способ использования полимера. Я спрашиваю, потому что мне начал нравиться полимер, и я хотел бы сохранить идиоматическое мышление.


angularjs polymer shadow-dom transclusion
person Martin Drlík    schedule 08.05.2014    source источник

Ответы (2)


arrow_upward
5
arrow_downward

В мире Shadow DOM это называется распределением. Чтобы распределить легкие узлы DOM в теневой дом, вы используете <content> точки вставки.

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

Это буквально способ рендеринга узлов из светлого дома в заполнители в теневом доме. Если вы хотите делать сложные вещи с атрибутами my-header/my-header-item title/name, вы можете сделать что-то вроде этого:

<polymer-element name="my-header">
  <template>
    <ul>
      <template repeat="{{item in items}}">
        <li>{{item.name}}</li>
      </template>
    </ul>
    <content id="c" select="my-header-item"></content>
  </template>
  <script>
   Polymer('my-header', {
     domReady: function() {
       this.items = [].slice.call(this.$.c.getDistributedNodes());
     }
   });
  </script>
</polymer-element>

Демонстрация: http://jsbin.com/hupuwoma/1/edit.

У меня есть более полноценная демонстрация вкладок, в которой эта настройка выполняется на https://github.com/ebidel/polymer-experiments/blob/master/polymer-and-angular/together/elements/wc-tabs..html.

person ebidel    schedule 08.05.2014

arrow_upward
2
arrow_downward

Хотя, по общему признанию, я тоже новичок в полимерах - думаю, я могу ответить на этот вопрос.

Вы должны иметь возможность заменить значение атрибута в шаблоне, используя синтаксис двойных усов, например.

<h1>{{title}}</h1>

См. http://www.polymer-project.org/docs/start/creatingelements.html#publishing

В дополнение к этому вы также можете заменить содержимое тега. Например, если вместо использования атрибута «имя» в вашем теге my-header-item у вас было что-то вроде этого...

<my-header-item>Item 1</my-header-item>

тогда вы можете заменить «Пункт 1» следующим образом:

<li><content></content></li>

См. http://www.polymer-project.org/platform/shadow-dom.html для этого использования

person David Claughton    schedule 08.05.2014