Week 16 | Computed Properties

polymer 1.0
Tue Dec 20 2016

In our demo we will go over computed properties in Polymer.

The loaded boolean value is set to false and after a second it is set to true. However when it changes the messages property changes as well!

Computed properties are nothing more than just another method in the setter of the loaded property which triggers every time the loaded property is updated.

<!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>[[message]]</template>
  </dom-module>
  <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: "alert-element",
        properties: {
          loaded: {
            type: Boolean,
            value: false
          },
          message: {
            type: String,
            computed: 'computedMessage(loaded)'
          }
        },
        computedMessage: function(loaded) {
          return (loaded) ? "Loaded!" : "Loading";
        },
        ready: function() {
          var self = this;
          self.loaded = false;
          setTimeout(function() {
            self.loaded = true;
          }, 1000);
        }
      });
    });
  </script>
</body>
</html>

 

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/

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!