example.html

<script>
can.Component.extend({
  tag: "site-app",
  scope: {
    define: {
      type: {
        value: "fun"
      },
      items: {
        Value: Site.List,
        get: function(currentValue){
          currentValue.replace( Site.findAll({type: this.attr("type")}) );
          return currentValue;
        }
      }
    }
  }
});
</script>
<script>
  <site-app>
  Link Type: <select can-value="type">
    <option value="fun">Fun</option>
    <option value="educational">Educational</option>
    <option value="empty">Empty</option>
    <option value="missing">Missing (404)</option>
  </select>

  <table class="table">
    <thead>
      <tr>
        <td>Name</td><td>URL</td>
      </tr>
    </thead>
    <tbody>
      {{#if items.isPending}}
      <tr class="info"><td colspan="2">Loading</td></tr>
      {{/if}}
      {{#if items.isResolved}}
        {{#if items.length}}
          {{#each items}}
          <tr>
            <td>{{name}}</td> <td>{{url}}</td>
          </tr>
          {{/each}}
        {{else}}
          <tr class="warning"><td colspan="2">No items</td></tr>
        {{/if}}
      {{/if}}

      {{#if items.isRejected}}
        <tr class="danger">
          <td colspan="2">Error: {{items.reason.responseJSON.message}}!</td>
        </tr>
      {{/if}}
    </tbody>
  </table>
</site-app>
</script>