使用JavaScript设置聚合物纸徽章标签

时间:2016-12-15 10:23:07

标签: polymer paper-badge

如何使用JavaScript设置label的{​​{1}}?

我试过这个但是不起作用:

paper-badge

这里有一个更完整的代码段:

Polymer.dom(document.getElementById("id_of_tag")).label = "5";

1 个答案:

答案 0 :(得分:1)

如果您尝试将其设置在Polymer元素中,请选择

this.$.id.label

或者如果它在dom-repeatdom-if

this.$$('#id').label



<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-badge/paper-badge.html">
<dom-module id="accessing-element">
  <template>
    <style>
      .myDiv {
        width: 250px;
        height: 40px;
        border: 1px solid black;
        margin-bottom: 30px;
      }
    </style>
    <div id="insideBadge" class="myDiv">badge inside element</div>
    <paper-badge for="insideBadge" id="insideOwnDom" label="1"></paper-badge>
    <div on-tap="_changeLabel">Click me to change all labels</div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'accessing-element',
    _changeLabel: function() {
      this.$.insideOwnDom.label = 2;

      var docLevel = document.getElementById('inSameDoc');
      docLevel.label = 3;

      var anotherElement = document.querySelector('another-element');
      var ele = Polymer.dom(anotherElement.root);
      var badge = ele.getEffectiveChildNodes()[3];
      badge.label = 4;
      // or
      //            anotherElement.label= 4;
    }
  })
</script>


<dom-module id="another-element">
  <template>
    <style>
      .myDiv {
        width: 250px;
        height: 40px;
        border: 1px solid black;
        margin-bottom: 30px;
      }
    </style>
    <div id="anotherELementsBadge" class="myDiv">badge inside another element</div>
    <paper-badge id="anotherElementsDom" for="anotherELementsBadge" label="{{label}}"></paper-badge>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'another-element',
    properties: {
      label: {
        type: Number,
        value: 1
      }
    }
  })
</script>


<html>

<head>
  <meta charset="UTF-8">
  <title>Change labels</title>
</head>

<body>
  <style>
    .myDiv {
      width: 250px;
      height: 40px;
      border: 1px solid black;
      margin-bottom: 30px;
    }
  </style>
  <div style="height:100px;"></div>
  <div id="docBadge" class="myDiv">badge at same doc level</div>
  <paper-badge for="docBadge" id="inSameDoc" label="1"></paper-badge>
  <another-element></another-element>
  <accessing-element></accessing-element>
</body>

</html>
&#13;
&#13;
&#13;