can/view/stache/doc/promise.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<script id="app" type="text/stache">
<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.value.length}}
        {{#each items.value}}
        <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>
  
<div id='out'></div>

<script src="../../../node_modules/steal/steal.js" main="@empty" id='demo-source'>
import $ from "jquery";
import can from "can";
import "can/view/bindings/bindings";
import "can/view/stache/stache";
import "can/util/fixture/fixture";
import "can/model/model";
import "can/map/define/define";


can.fixture("GET /sites", function(request, response){
  
  if(request.data.type == "fun"){
    return [
      { name: "Reddit", url: "reddit.com" },
      { name: "Digg", url: "digg.com" }
    ];
  } else if(request.data.type == "educational") {
    return [
      { name: "MDN", url: "mdn.com"  },
      { name: "Bitovi", url: "bitovi.com" }
    ];
  } else if( request.data.type == "missing" ){
    response(404,"error",{message:"Resource does not exist"});
  }else {
    return [];
  }
});
can.fixture.delay = 1500;
	
var Site = can.Model({
  findAll: "GET /sites"
},{});

can.Component.extend({
  tag: "site-app",
  viewModel: {
    define: {
      type: {
        value: "fun"
      },
      items: {
        get: function(){
          return Site.findAll({type: this.attr("type")}) ;
        }
      }
    }
  }
});
	

$("#out").html( can.view("app",{}) );

</script>