<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="post-list-item.html">

<polymer-element name="post-list" attributes="show">
  <template>
    <style>
    :host {
      display: block;
      width: 100%;
    }
    post-list-item {
      margin-bottom: 30px;
    }
    </style>

    <div layout vertical center>

      <template repeat="{{post in posts}}">
        <post-list-item post="{{post}}"></post-list-item>
      </template>

    </div>

  </template>

  <script>
    Polymer({
      created: function () {
        this.posts = [];
      },
      attached: function () {
        Unquote.posts.on('reset add remove', function () {
          this.posts = this.getPosts();
        }, this);
        Unquote.view.on('change:page', function (model, page) {
          this.posts = this.getPosts();
        }, this);
      },
      getPosts: function () {
        switch (Unquote.view.get('page')) {
          case 'all': {
            return Unquote.posts.models;
          }
          case 'favorites': {
            return Unquote.posts.filter(function (post) {
              return post.get('favorite');
            });
          }
          default: {
            return [];
          }
        }
      },
      detached: function () {
        Unquote.posts.off(null, null, this);
        Unquote.view.off(null, null, this);
      }
    });
  </script>

</polymer-element>

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="post-list-item.html">

<polymer-element name="post-list" attributes="show">
  <template>
    <style>
    :host {
      display: block;
      width: 100%;
    }
    post-list-item {
      margin-bottom: 30px;
    }
    </style>

    <div layout vertical center>

      <template repeat="{{post in posts}}">
        <post-list-item post="{{post}}"></post-list-item>
      </template>

    </div>

  </template>

  <script>
    Polymer({
      created: function () {
        this.posts = this.getPosts();
      },
      attached: function () {
        Unquote.posts.on('reset add remove', function () {
          this.posts = this.getPosts();
        }, this);
        Unquote.view.on('change:page', function (model, page) {
          this.posts = this.getPosts();
        }, this);
      },
      getPosts: function () {
        switch (Unquote.view.get('page')) {
          case 'all': {
            return Unquote.posts.models;
          }
          case 'favorites': {
            return Unquote.posts.filter(function (post) {
              return post.get('favorite');
            });
          }
          default: {
            return [];
          }
        }
      },
      detached: function () {
        Unquote.posts.off(null, null, this);
        Unquote.view.off(null, null, this);
      }
    });
  </script>

</polymer-element>

Load posts on element creation
Load posts on element creation

Resolve #1.
