Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="can-connect starter">
<meta name="can-connect" content="can-connect starter" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  
  <script id="templ" type="text/stache">
  <table border="1">
  <tr>
    <th>complete</th>
  </tr>
  {{#myList.isPending}}
    <tr>
      <td>Loading</td>
    </tr>
  {{/myList.isPending}}
  {{#if myList.isResolved}}
    {{#each myList.value}}
    <tr>
      <td>{{name}}</td>
    </tr>
    {{/each}}
  {{/if}}
  </table>
  </script>
​
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://canjs.com/release/master/can.jquery.js"></script>
  <script src="http://canjs.com/release/master/can.fixture.js"></script>
<script src="https://cdn.rawgit.com/canjs/can-set/v0.5.6/dist/global/can-set.js"></script>
<script src="https://cdn.rawgit.com/pYr0x/can-connect/master/dist/global/can-connect.js"></script>
  
  <script src="//canjs.com/release/master/can.stache.js"></script>
  <script src="//canjs.com/release/master/can.map.define.js"></script>
​
  
</body>
</html>
 
Todo = can.Map.extend({
            
});
Todo.List = can.List.extend({
  Map: Todo
},
{});
​
​
var cacheConnection = connect(["data-localstorage-cache"], {
    name: "todoCache",
    idProp: "_id"
});
// clear cache!
cacheConnection.clear();
​
var algebra = new set.Algebra(
  set.comparators.id("_id"),  
  set.comparators.sort('sortBy')
);
​
var todoConnection = connect.superMap({
  //idProp: "_id",
  cacheConnection: cacheConnection,
  Map: Todo,
  List: Todo.List,
  url: {
    getListData: "GET /todos",
    createData: "POST /todos"
  },
  algebra: algebra
});
​
​
// get list
can.fixture("GET /todos", function(request, foo){
    data = {
      data: [
        {_id: 3, name: "gym"},
        {_id: 0, name: "dishes"}
      ]
    };  
  return data;   
});
​
// create todo
can.fixture("POST /todos", function(){
  return {
    _id: 5, name: "ago to school"
  };
});
​
​
// get todo list
var todoPromise = Todo.getList({sortBy: "name"});
​
// after todo is resolved, add a new todo
todoPromise.then(function(todos){   
  var t = new Todo({name: "ago to school"});
  todoConnection.save(t);
});
​
​
​
// output
var renderer = can.view('templ');
​
$('body').append(renderer({
  myList: todoPromise
}));
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x