Question

我有以下代码。

<template if="{{editing}}">
  <div hidden="hidden" class="card-header" layout horizontal center>
      <content select="img"></content>
      <content select="h2"></content>
  </div>
  <paper-input label="New Name"></paper-input>
</template>

我想将label上的paper-input设置为h2选择的内容。

因此这里隐藏的元素将包含<h2> the thing I'm editing </h2>。我希望文字＆＃34;我编辑的内容＆＃34;成为paper-input元素的标签。

Answer 1

执行此操作的一种方法是在内容上使用getDistributedNodes()，在h2.textContent之外使用，并将数据绑定到纸张输入的标签：

<div hidden>
  <content id="c" select="h2"></content>
</div>
<paper-input label="{{label}}"></paper-input>

..

Polymer('my-element', {
  attached: function() {
    this.label = this.$.c.getDistributedNodes()[0].textContent;
  }
});

演示：http://jsbin.com/tiwedacepimi/1/edit

注意：我使用的hidden属性隐藏了<content>处投射的节点。这里使用<content>的唯一原因是确保您只获得元素所需的节点。 <content>插入点纯粹用于将用户世界中的节点渲染到阴影dom世界中。但是，你隐藏了它们：）

聚合物输入标签使用内容

1 个答案: