1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

<script type="text/x-handlebars">
  <ul id='todo-list'>
  {{#each Todos.records}}
    {{#view Todos.TodoView tagName="li" contentBinding="this"}}
      <div class="edit">
        {{view Todos.TextField editModeBinding="editMode" contentBinding="this" valueBinding="content.text"}}
      </div>
      <div class='todo' id="{{_id}}">
        <div class='display'>
          <input class='check' type='checkbox' />
            <div class='todo-text'>{{content.text}}</div>
            {{view Em.Button contentBinding="this" valueBinding="this.value" tagName="span" 
              class="todo-destroy" target="Todos.records" action="destroyTodo"}}
        </div>
      </div>
    {{/view}}
  {{/each}}
  </ul>
</script>
<script>
  Todos = Em.Application.create({
    records: [], 

    ready: function() {
      this.set('records', Todos.store.findAll(Todos.Todo));
      this._super();
    }
  });

  Todos.Todo = DS.Model.extend({
    primaryKey: '_id',
    text: DS.attr('string')
  });

  Todos.store = DS.Store.create({
    adapter: DS.Adapter.create({
      findAll: function(store, type) {
        $.getJSON("/", function(data) {
          store.loadMany(type, data);
        });
      },

      updateRecord: function(store, type, model) {
        var id = model.get("id");
        $.put('/todos/' + model.get("id"), model,function(data) {
          store.didUpdateRecords(model);
        });
      }
    })
  });

  Todos.TodoView = Em.View.extend({
    classNameBindings: ['editing'],
    editing: false,

    doubleClick: function(evt) {
      this.set('editing', true);
      this.$("input").focus();
    }
  });

  Todos.TextField = Em.TextField.extend({
    insertNewline: function() {
      Todos.store.update(this.content);
      this.content.set("editing", false);
    }
  });

  // Not used
  Todos.RemoveButton = Em.Button.extend({
    classNames: "todo-destroy",
    tagName:"span",

    click: function() { }
  });
</script>