Question

我开始学习Polymer 1.0，我无法弄清楚如何以编程方式搜索插入点。我意识到我可以在<div>标记周围包裹<content>并检查<div>是否有子项，但这需要为每个元素呈现<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 。

内容API：



Polymer.dom（ContentElement的）.getDistributedNodes（）



Polymer.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
使用新的（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>

聚合物检查插入点

1 个答案: