Polymer.js Demo of the Week | Week 24 | Auto-binding Template

The “dom-bind” template is a perfect way to bind data without the creation of an element

  <template id="t" is="dom-bind">
    <template is="dom-repeat" items="{{data}}">
      <div>{{item}}</div>
    </template>
  </template>

  <script>
    var t = document.querySelector('#t');
    t.data = ["Message 1", "Message 2"];
  </script>

 
You can preview the course over here => https://app.pluralsight.com/courses/polymer-js-getting-started

And all of the demo code over here => https://bstavroulakis.com/pluralsight/courses/polymer-js-getting-started/

Polymer.js Demo of the Week | Week 23 | Array Selector

Array Selector is the last binding helper element we’ll go over covering the biggest part of the whole framework’s documentation concerning data binding.

<array-selector id="selector" items="{{messages}}" 
        selected="{{selected}}" multi toggle></array-selector>

 

toggleSelection: function(e) {
            var item = this.$.messageList.itemForElement(e.target);
            this.$.selector.select(item);
          }

 

In the following example we can select/deselect items in the array-selector that will handle the state of our items.

 
You can preview the course over here => https://app.pluralsight.com/courses/polymer-js-getting-started

And all of the demo code over here => https://bstavroulakis.com/pluralsight/courses/polymer-js-getting-started/

GDG Thessaloniki – Devfest #4

It was an amazing experience to talk at the GDG Thessaloniki – Devfest #4. I had the opportunity to present Progressive Web Apps and meet with the community of Thessaloniki.

I hope to see you all at the GDG Athens event!

Polymer.js Demo of the Week | Week 22 | Filter and Sorting

The template repeater has two more interesting attributes for filtering and sorting.

The sort attribute will sort the items according the comparer function sortPriority. In the sort priority we can see that we compare two items concerning their priority subproperties and this will sort the items according to priority in ascending order. To learn more on sort function you can checkout the w3c page at the following link => https://www.w3schools.com/jsref/jsref_sort.asp .

Lastly, in the filter attribute we’ll run the computeFilter every time the filterString changes. This function will return true if the text of the message each time has a substring of the string entered.

 
You can preview the course over here => https://app.pluralsight.com/courses/polymer-js-getting-started

And all of the demo code over here => https://bstavroulakis.com/pluralsight/courses/polymer-js-getting-started/

<!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 value="{{filterString::input}}">
      <br/>
      <template is="dom-repeat" items="{{messages}}" as="message" 
      filter="{{computeFilter(filterString)}}" sort="sortPriority">
        {{message.text}}: {{message.priority}}
        <br/>
      </template>
    </template>
  </dom-module>
  <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: "alert-element",
        properties: {
          messages: {
            type: Array,
            value: function() {
              return [{
                text: 'One Message',
                priority: 2
              }, {
                text: 'Another Message',
                priority: 5
              }, {
                text: 'Message',
                priority: 4
              }, {
                text: 'Best Message',
                priority: 3
              }, {
                text: 'Message 4',
                priority: 1
              }, {
                text: 'Message 5',
                priority: 4
              }, ];
            }
          },
          filterString: {
            type: String
          }
        },
        sortPriority: function(a, b) {
          return a.priority - b.priority;
        },
        computeFilter: function(text) {
          return function(message) {
            return message.text.indexOf(text) > -1;
          }
        },
        ready: function() {
          //this.set('messages.2.priority', 'Major');
        }
      });
    });
  </script>
</body>
</html>

Polymer.js Demo of the Week | Week 21 | Template Repeater

Another interesting and useful template type extension is the dom-repeat. The dom-repeat template will loop through the array items of the array given in the items attribute. Then we can get the index and the item in the loop.

Our first example is a simple loop of a messages array as you can see we loop through these items and display the index the value of those items.

Our second example is a bit more complex as our array has objects that contains arrays of themselves. So we can loop through these items. With the “as” attribute we can name the instance of the item every time in the loop and then we can add inner dom-repeat templates as well looping through arrays that are subproperties.

Lastly, with the index-as we can name the instance of the index. So this repeater will repeat through these items and then foreach of those it will repeat through the levels arrays as well, as you can see in our live preview.

 
You can preview the course over here => https://app.pluralsight.com/courses/polymer-js-getting-started

And all of the demo code over here => https://bstavroulakis.com/pluralsight/courses/polymer-js-getting-started/

<!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>
        Messages:<br/>
        <template is="dom-repeat" items="{{messages}}">
          Index of message: {{index}}<br/>
          Message: <b>{{item}}</b><br/>
          ---------------<br/>
        </template>
        <template is="dom-repeat" items="{{messagePriorities}}" as="priority">
          <p>
            {{priority.name}}<br/>
            <template is="dom-repeat" items="{{priority.levels}}" as="level" index-as="level_index">
              {{level_index}} : {{level}}<br/>
            </template>
          </p>
        </template>
      </template>
    </dom-module>
    <script>
      HTMLImports.whenReady(function () {
        Polymer({
          is: "alert-element",
          properties:{
            messages:{
              type: Array,
              value: function(){
                return ["Message 1", "Message 2"];
              }
            },
            messagePriorities:{
              type: Array,
              value: function(){
                return [{name: "Major", levels: ["Super major", "Kind of a major"]},
                        {name: "Minor", levels: ["Minorish", "Good to have"]}
                       ];
              }
            }
          }
        });
      });
    </script>
    </body>
</html>

Polymer.js Demo of the Week | Week 20 | Conditional Templates

Polymer provides a set of custom elements to help with common data binding use cases. Let us check the conditional templates. We have the custom HTMLTemplateElement type extension called dom-if. With this we can stamp contents to the DOM only when the property in it is set to true.

In our example, the isSecureMessage will create and add the content in the template when it is set to true. I’ll go to the ready method and set the property to true and set it to false after 3 seconds. This will create and append our super secure message and after 3 seconds will destroy the DOM item because it sets it to false again.

 
You can preview the course over here => https://app.pluralsight.com/courses/polymer-js-getting-started

And all of the demo code over here => https://bstavroulakis.com/pluralsight/courses/polymer-js-getting-started/

<!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>
      Secure Messages:
      <br/>
      <template is="dom-if" if="{{isSecureMessage}}">
        Super Secure! <span>{{message}}</span>
      </template>
    </template>
  </dom-module>
  <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: "alert-element",
        properties: {
          message: {
            type: String,
            value: "This message is super secure. It will self-destruct."
          },
          isSecureMessage: {
            type: Boolean,
            value: false
          }
        },
        ready: function() {
          var self = this;
          self.isSecureMessage = true;
          setTimeout(function(){
              self.isSecureMessage = false;
          }, 3000);
        }
      });
    });
  </script>
</body>
</html>

Polymer.js Demo of the Week | Week 19 | Observer Array-mutations

In the previous demo we mentioned observers and object sub-properties.To listen to changes made in an array now we can use some additional methods.

For example to listen to whether an item is added/removed we can add a splice observer

        observers: [
          'messagesAddedOrRemoved(messages.splices)'
        ]

This will trigger the method specified offering an object with multiple information concerning the items added/removed.

Lastly, have in mind that when working with Polymer if you want to update an array and trigger the binding effects of it you can use the Array Mutation with the syntax of:

this.[the method](the property, additional parameters)

for example

 this.splice('messages', 0, 1);

 

 
You can preview the course over here => https://app.pluralsight.com/courses/polymer-js-getting-started

And all of the demo code over here => https://bstavroulakis.com/pluralsight/courses/polymer-js-getting-started/

You can preview the full demo here:

<!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>
  <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'alert-element',
        properties: {
          messages: {
            type: Array,
            value: function() {
              return [{
                text: 'Loading Messages'
              }, {
                text: 'Messages Loaded'
              }];
            }
          }
        },
        observers: [
          'messagesAddedOrRemoved(messages.splices)'
        ],
        messagesAddedOrRemoved: function(changeRecord) {
          // Array Observation Step 2
          if (!changeRecord) {
            return;
          }
          changeRecord.indexSplices.forEach(function(s) {
            console.log(s.index + ' position where the splice started');
            s.removed.forEach(function(item) {
              console.log(item.text + ' was removed');
            });
            console.log(s.addedCount + ' items were added');
          }, this);
          console.log('--------------');
        },
        ready: function() {
          this.splice('messages', 0, 1); // Array Mutation Step 1
          this.push('messages', {
            text: 'Message Added'
          }, {
            text: 'Message Added1' 
          }); // Array Mutation Step 1
        }
      });
    });
  </script>
</body>
</html>

Polymer.js Demo of the Week | Week 18 | Observer Sub-properties

In this example we will go over ways to observe sub-properties.

We have one object named “loadStatus” with two properties “percent”, “loading”. Then in the observers array we will trigger two methods every time the percent property changes and when the “*” property changes which basically means any property.

When we pass one property in the observer method we will receive every time the property changes the new property value.

When we pass the * value, every time one of the parameters is updated we will receive an object with the new values and some meta-information.

 
You can preview the course over here => https://app.pluralsight.com/courses/polymer-js-getting-started

And all of the demo code over here => https://bstavroulakis.com/pluralsight/courses/polymer-js-getting-started/

<!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>
          <div hidden$="{{!loadStatus.loading}}">loading (<span>{{loadStatus.percent}}%</span>)...</div>
          [[message]]
          <paper-input value="{{message}}"></paper-input>
      </template>
    </dom-module>
    
    <script>
      HTMLImports.whenReady(function () {
        Polymer({
            is: "alert-element",
            properties:{
                message:{
                    type: String,
                    value: "hello"
                },
                loadStatus:{
                    type: Object,
                    value: function(){
                        return { percent: 0, loading: true }
                    }
                }
            },
            observers:[
                'loadingCheck(loadStatus.percent)',
                'loadingCheckAll(loadStatus.*)'
            ],
            loadingCheckAll: function(changeRecord){
              console.log(changeRecord);
            },
            loadingCheck: function(loadingPercentange){
              console.log(loadingPercentange, '%');
            },
            ready: function(){
              this.message = "Not quite my tempo.";
              this.loadStatus.percent = 10;
              this.set("loadStatus.percent", 20);
            }
        });
      });
    </script>
    </body>
</html>
1 2 3 8  Scroll to top