CODEWITHSUNDEEP
polymer
Diyarbakir
Diyarbakir

Reputation: 2099

How can I bind a polymer behavior to a child element?

I am reading about Behaviors in Polymer.

I copy/pasted the example for the 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);
  }

};

Then, in my element i have the following (just the important parts):

<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>

Now the problem is that the toggling of the highlighted class works when clicking inside the host element but it is not highlighting just the h1 element. It is adding the highlighted class to the host element.

This is how it is rendered in the browser:

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

When clicking I indeed see that it toggles the highlighted class on the host element highlighting-test and the background changes.

How can I make sure that the highlighting behavior is applied to just the h1 tag?

Upvotes: 2

Views: 108

Answers (2)

Jeff Machamer
Jeff Machamer

Reputation: 942

Change:

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

to:

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

And in HTML add an ID to H1:

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

Upvotes: 0

a1626
a1626

Reputation: 2964

Use this.toggleClass(className, bool, this.$.id_of_element)

Upvotes: 1

Related Questions