Проверка полимера на наличие точек вставки

Я начинаю изучать Polymer 1.0 и не могу понять, как программно искать точки вставки. Я понимаю, что мог бы обернуть <div> вокруг тега <content> и проверить, есть ли у этого <div> дети или нет, но это требует рендеринга <div> для каждого элемента, что кажется расточительным. Есть ли способ с помощью JavaScript проверить, были ли загружены какие-либо точки вставки? В идеале, у меня была бы функция thereAreInsertionPoints, которая определяла бы, будет ли отображаться тег <p>. Мой полимерный код выглядит так: 

  <template>
      <h1>{{title}}</h1>
      <p>{{body}}</p>
      <content id="content"></content>
      <p if="{{thereAreInsertionPoints()}}">There are insertion points!</p>

  </template>

  <script>
    Polymer({
      is: "post-content",
      properties: {
        title: String,
        body: String
      },
      thereAreInsertionPoints: function(){
        //determine whether or not we have insertion points
      }
    });

  </script>
1 2
javascript polymer html

1 ответ:

Существуют различные полимерные API для работы с DOM, включая Content API.

API Содержимого:

  • Полимер.дом(contentElement).getDistributedNodes()

  • Полимер.узел DOM).getDestinationInsertionPoints()

Эти API можно использовать различными способами для проверки распределенных узлов и точек вставки. Я создал рабочую реализацию, которая показывает post-content элемент с дополнительными методами для проверки распределенных узлов и конечных точек вставки. 

<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import"
      href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="post-content">
	<template>
		<h1>{{title}}</h1>
		<p>{{body}}</p>
		<content></content>
		<template is="dom-if" if="{{destinationInsertionPointsExist()}}">
			<p>Destination insertion point(s) exist.</p>
		</template>
		<template is="dom-if" if="{{distributedNodesExist()}}">
			<p>Distributed node(s) exist.</p>
		</template>
	</template>
	<script>
		Polymer({
			is: "post-content",
			properties: {
				title: String,
				body: String
			},
			destinationInsertionPointsExist: function () {
				var distributedNodes = Polymer.dom(this).childNodes;

				var countDestinationInsertionPoints = 0;
				distributedNodes.forEach(function (distributedNode) {
					var distributedNodeHasDestinationInsertionPoints = Polymer.dom(distributedNode).getDestinationInsertionPoints().length > 0 ? true : false;

					if (distributedNodeHasDestinationInsertionPoints) {
						countDestinationInsertionPoints++;
					}
				});

				return countDestinationInsertionPoints > 0 ? true : false;
			},
			distributedNodesExist: function () {
				var contentNodes = Polymer.dom(this.root).querySelectorAll("content");

				var countDistributedNodes = 0;
				contentNodes.forEach(function(contentNode) {
					var contentNodehasDistributedNodes = Polymer.dom(contentNode).getDistributedNodes().length > 0 ? true : false;

					if (contentNodehasDistributedNodes) {
						countDistributedNodes++;
					}
				});

				return countDistributedNodes > 0 ? true : false;
			}
		});
	</script>
</dom-module>

<post-content title="This is the title" body="This is the body">
	<p>This is distributed content</p>
</post-content>

Несколько замечаний о коде:

  • Я сделал много имен переменных и троичных проверок очень многословными для ясности в этом ответе. Можно было бы внести изменения для упрощения кода.

    Например:

    var distributedNodeHasDestinationInsertionPoints = Polymer.dom(distributedNode).getDestinationInsertionPoints().length > 0 ? true : false;

    Может стать чем-то вроде

    var hasInsertionPoints = Polymer.dom(distributedNode).getDestinationInsertionPoints().length

  • Использовать новый (полимер 1.0) dom-if условный шаблон.

    <p if="{{thereAreInsertionPoints()}}">There are insertion points!</p>

    Становится 

<template is="dom-if" if="{{destinationInsertionPointsExist()}}">
    <p>Destination insertion point(s) exist.</p>
</template>

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

    • Например, даже если между тегами start и end элемента post-content имеется один пробел, оба эти метода вернутся истинный.

      <post-content title="This is the title" body="This is the body"> </post-content>

2