Day two: Todopoly

September 27, 2015

Todopoly is an application build with Polymer where users can organize their tasks. Made pretty with material design and made functional with web components.

live demo

While building this application I encountered a few challenges. I discovered that Polymer’s data binding does not work out of the box with Arrays. For Example when I tried to push to the todos array. It did not trigger the DOM to be re-rendered.

This does not work:

Polymer({
  is: 'my-element',
  properties: {
    todos: Array
  },
  ready: function() {
    this.todos.push({
      text: 'Write a blog post'
    });
  }
});

Polymer provides a push method which expects the property name as the first argument and the value to push as the second. So to make the previous example work we have to change it to:

Polymer({
	is: 'my-element',
    properties: {
      todos: Array
    },
    ready: function() {
      this.push('todos', { // call push on the component instead of the Array
        text: 'Write a blog post'
      });
    }
});

It was fun designing the app. The todo insert form has been placed inside the header panel. This was inspired by some designs on materialup. Check it out if you havn’t already. They have a lot of awesome material goodies!

todo preview

Had a lot of fun creating it. Please share the excitement and leave one of them big ‘ol stars on the repo and let me know what you think!

Comments