插入点的聚合物检查

Question

我开始学习 Polymer 1.0，但我不知道如何以编程方式搜索插入点。我意识到我可以在 <content> 标签周围包装一个 <div> 并检查 <div> 是否有 children ，但这需要为每个元素渲染一个 <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>

Answer 1

有多种 Polymer APIs for working with the DOM，包括 Content 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 元素开始和结束标记之间只有一个 space，这两种方法都将 return 为真。
  
  <post-content title="This is the title" body="This is the body"> </post-content>

插入点的聚合物检查

Polymer Check for Insertion Points

html

javascript

polymer

polymer-1.0