gistfile1.txt

<script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
http://canjs.com/release/2.1.0/can.jquery.js
<script type="text/javascript">
// Here's where we get, save, and delete to-dos.
// (Yep, this is all we need to access the Todo
// REST endpoints!)
var Todo = can.Model.extend({
  findAll: 'GET /todos',
  findOne: 'GET /todos/{id}',
  update: 'PUT /todos/{id}',
  destroy: 'DELETE /todos/{id}'
}, {});

// For this example, we're not actually going out to
// a REST endpoint, so we'll use fixtures to emulate that.
// Fixtures help you test your application when you
// don't have access to your REST services.
var TODOS = [
  'Download CanJS2',
  'Download CanJS',
  'Read the guides',
  'Build your app',
  'Become immortal2',
  'Become immortal',
  'Haircut @ 2pm'
];

var todoStore = can.fixture.make(TODOS.length, function(i) {
  return {
    id: i + 1,
    description: TODOS[i],
    done: false
  };
});

can.fixture({
  'GET /todos': todoStore.findAll,
  'GET /todos/{id}': todoStore.findOne,
  'PUT /todos/{id}': todoStore.update,
  'DELETE /todos/{id}': todoStore.destroy
});

// Let's drag this out a bit.
can.fixture.delay = 500;

can.Component.extend({
  tag: "todos-app",
  scope: {
    selectedTodo: null,
    todos: new Todo.List({}),
    select: function(todo) {
      this.attr('selectedTodo', todo);
    },
    saveTodo: function(todo) {
      todo.save();
      this.removeAttr('selectedTodo');
    }
  }
})

// Start the application by rendering our template!
$("#content").html(can.view("appMustache", {}))
</script>

<div id="content">
</div>
<script id='appMustache' type='text/mustache'>
  <todos-app>
    <h2>Todays to-dos</h2> {{#selectedTodo}}
    <div id='editor'>
      <input type='text' can-value='description' can-change="saveTodo" />
    </div>
    {{/selectedTodo}}
    <ul>
      {{#each todos}}
      <li>
        <input type='checkbox' can-value='complete'>
        <span class="description {{#if complete}}done{{/if}}" can-click='select'>{{description}}</span>
        <button can-click="destroy"></button>
      </li>
      {{/each}}
    </ul>
  </todos-app>
</script>