can/list/promise/promise.html

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

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<style>
	body {margin: 8px;}
</style>
<script type="text/javascript" src="../../node_modules/steal/steal.js" main="@empty"></script>
<div id="demo">
<div id="app"></div>

<script type="text/mustache" id="app-template">

<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>
</div>


<script>DEMO_HTML = document.getElementById("demo").innerHTML</script>
<script>
	
steal("can","can/util/fixture","can/list/promise", "can/map/define",function(){
	
	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;
	
	Site = can.Model({
		findAll: "GET /sites"
	},{});
	
	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;
					}
				}
			}
		}
	});
	
	$("#app").html(  can.view("app-template",{}))
	
});
	
	
	
</script>