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>

单击时，我确实看到它切换主机元素highlighted上的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>

如何将聚合物行为绑定到子元素？

2 个答案: