Week 15 | Attribute Binding

polymer 1.0
Fri Dec 09 2016

Attribute binding is pretty straightforward. In Polymer to bind a property with an attribute we can use the “

#8221; symbol. So to bind in our example the “messageStyle” with the style attribute we can use the following syntax style$=”{{messageStyle}}”.

<!DOCTYPE html>

<html>
    <head>
        <script src="https://polygit.org/polymer+:1.3.1/components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="https://polygit.org/polymer+:1.3.1/components/polymer/polymer.html" />
    </head>
    <body>
          <alert-element></alert-element>
    
    <dom-module id="alert-element">
      <template>
          <input type="checkbox" checked$="{{messageChecked}}">
          <div style$="{{messageStyle}}">
              <div class$="{{messageClass}}">
                  <a href$="{{messageUrl}}">
                    <label for$="{{messageLabel}}">Label</label>
                    <div data-bar$="{{messageLabel}}">Data-bar</div> 
                  </a>
              </div>
          </div>
      </template>
    </dom-module>
    
    <script>
      HTMLImports.whenReady(function () {
        Polymer({
            is: "alert-element",
            properties:{
                messageClass:{
                    type: String,
                    value: "m-class"
                },
                messageChecked:{
                    type: Boolean,
                    value: true  
                },
                messageUrl:{
                    stype: String,
                    value: "http://pluralsight.com"  
                },
                messageStyle:{
                    type: String,
                    value: 'background-color: #efefef'
                },
                messageLabel:{
                    type: String,
                    value: "message-label"
                }
            },
            ready: function(){
            }
        });
      });
    </script>
    </body>
</html>

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!