如何将聚合物行为与子元素结合起来？

Question

我在读关于聚合物中的行为的书。

我复制/粘贴了highlight-behavior.html的示例

<script>
HighlightBehavior = {

  properties: {
    isHighlighted: {
      type: Boolean,
      value: false,
      notify: true,
      observer: '_highlightChanged'
    }
  },

  listeners: {
    click: '_toggleHighlight'
  },

  created: function() {
    console.log('Highlighting for ', this, 'enabled!');
  },

  _toggleHighlight: function() {
    this.isHighlighted = !this.isHighlighted;
  },

  _highlightChanged: function(value) {
    this.toggleClass('highlighted', value);
  }

};

​

然后，在我的元素中，我有以下内容(只是重要的部分)：

<link rel="import" href="highlight-behavior.html">

<dom-module id="highlighting-test">
  <template>
    <style>
        :host {
            display: block;
            background-color: red;
        }

        :host.highlighted {
            background-color: green;
        }

      .highlighted {
        background-color: green;
      }
    </style>

  <h1>Click anywhere here to toggle highlighting!</h1>
  </template>

  <script>
    Polymer({
      is: 'highlighting-test',
      behaviors: [HighlightBehavior]
    });
  </script>
</dom-module>

现在的问题是，当单击主机元素时，highlighted类的切换可以工作，但它不只是突出显示h1元素。它将highlighted类添加到主机元素中。

它在浏览器中的呈现方式如下：

<highlighting-test class="highlighted">
  <h1 class="style-scope highlighting-test">Click anywhere here to toggle highlighting!</h1>
</highlighting-test>

当单击时，我确实看到它在主机元素highlighting-test上切换了highlighting-test类，并且背景也发生了变化。

如何确保高亮显示行为仅应用于h1标记？

Answer 1

使用this.toggleClass(className, bool, this.$.id_of_element)

Answer 2

更改：

_highlightChanged: function(value) {
    this.toggleClass('highlighted', value);
}

至：

_highlightChanged: function(value) {
    this.$.hId.toggleClass('highlighted', value);
}

在HTML中，向H1添加一个ID：

 <h1 id="hId">Click anywhere here to toggle highlighting!</h1>