javascript - 插入点的 polymer 检查

Question

我开始学习 Polymer 1.0，但我不知道如何以编程方式搜索插入点。我意识到我可以包装一个 <div> <content>周围标记并检查是否 <div>有没有 child ，但这需要渲染 <div>对于每个元素，这似乎很浪费。有没有一种方法可以使用 JavaScript 检查是否已加载任何插入点？理想情况下，我有一个函数 thereAreInsertionPoints这将决定是否 <p>标签会呈现。我的 polymer 代码如下所示:

  <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>

Answer 1

有各种Polymer APIs for working with the DOM包括内容 API。

Content APIs:

• Polymer.dom(contentElement).getDistributedNodes()

• Polymer.dom(node).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

• 使用新的 (Polymer 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确保您完全理解实际检查的内容的方法。您可能需要修改这些方法以满足您的特定需要和要求。

  • 例如，即使您在 post-content 之间有一个空格元素开始和结束标记这两种方法都将返回 true。

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