CODEWITHSUNDEEP
polymer
Nam Thai
Nam Thai

Reputation: 851

Polymer dom binding to attribute

I have this auto-binding template:

<template is="dom-repeat" items="[[row]]" as="item">
  <td violated=[[item.violated]] class="result-tb-data">[[item.value]]</td>
</template>

I don't know why item.value is binded correctly but [[item.violated]] is not binded. The value exists because I have tried the reverse binding:

<td violated=[[item.value]] class="result-tb-data">[[item.violated]]</td>

I know that it is not binded because I have this style:

.result-tb-data[violated=true] {
  font-style: italic;
}

and item.violated is a boolean field.

Here is a full example:

<dom-module id="my-element">
  <style>
    span[violated="true"] {
      font-style: italic;
    }
  </style>

  <template>
    <span violated="{{violated}}">Text</span>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-element',
    properties: {
      violated: {
        type: Boolean,
        value: true
      }
    }
  });
</script>

Upvotes: 1

Views: 84

Answers (2)

mmm111mmm
mmm111mmm

Reputation: 4085

Maria is correct, but when I tried your example I came across another problem.

This is you're setting a boolean to a property and not a string. This works:

<dom-module id="my-element">
  <style>   
    span[violated="true"] {
      font-style: italic; 
    }       
  </style>  

  <template>    
    <span violated$="{{violated}}">Text</span>
  </template>   
</dom-module>

<script>  
  Polymer({
    is: 'my-element',
    properties: {   
      violated: {
        type: String,
        value: "true" 
      }
    }
  });
</script>

Upvotes: 1

Maria
Maria

Reputation: 5604

The correct syntax for binding to attribute contains a $ (docs). So in your case it should be:

violated$=[[item.violated]]

Upvotes: 2

Related Questions