Todo application

Buildfile

# Add initial buildfile information here
config :all, :required => ["sproutcore/core_foundation","sproutcore/datastore","sproutcore/ajax"], :theme => "sproutcore/empty_theme"

proxy '/tasks', :to => 'localhost:3000'

task_data_source.js

// ==========================================================================
// Project:   Todos.TaskDataSource
// Copyright: @2011 My Company, Inc.
// ==========================================================================
/*globals Todos */

/** @class

  (Document Your Data Source Here)

  @extends SC.DataSource
*/
Todos.TaskDataSource = SC.DataSource.extend(
/** @scope Todos.TaskDataSource.prototype */ {

  didFetchTasks: function(response, store, query) {

    if (SC.ok(response)) {
      store.loadRecords(Todos.Todo, response.get('body'));
      store.dataSourceDidFetchQuery(query);

    } else store.dataSourceDidErrorQuery(query, response);
  },


  // ..........................................................
  // QUERY SUPPORT
  // 

  fetch: function(store, query) {

    // TODO: Add handlers to fetch data for specific queries.  
    // call store.dataSourceDidFetchQuery(query) when done.
    
    SC.Request.getUrl('/tasks').header({'Accept': 'application/json'}).json()
          .notify(this, 'didFetchTasks', store, query)
          .send();
        return YES;
  },

  // ..........................................................
  // RECORD SUPPORT
  // 
  updateRecord: function(store, storeKey) {
    
    // TODO: Add handlers to submit modified record to the data source
    // call store.dataSourceDidComplete(storeKey) when done
    
    console.log(store.idFor(storeKey));
    SC.Request.postUrl('/tasks/'+store.idFor(storeKey)).header({
                'Accept': 'application/json'
            }).json()
      .notify(this, 'didUpdateTask', store, storeKey)
      .send(store.readDataHash(storeKey));
    

    return YES ; // return YES if you handled the storeKey
  },
  
  didUpdateTask: function(response, store, storeKey) {
    if (SC.ok(response)) {
      var data = response.get('body');
      if (data) data = data.content;
      
      store.dataSourceDidComplete(storeKey, data); // update url

    } else store.dataSourceDidError(storeKey, response);
  },
  
  retrieveRecord: function(store, storeKey) {
    
    // TODO: Add handlers to retrieve an individual record's contents
    // call store.dataSourceDidComplete(storeKey) when done.
    SC.Request.getUrl('/tasks/'+store.idFor(storeKey)).header({
                    'Accept': 'application/json'
                }).json()
          .notify(this, 'didRetrieveTask', store, storeKey)
          .send();
    
    return YES ; // return YES if you handled the storeKey
  },
  
  didRetrieveTask: function(store, storeKey) {
    if (SC.ok(response)) {
      var dataHash = response.get('body').content;
      store.dataSourceDidComplete(storeKey, dataHash);

    } else store.dataSourceDidError(storeKey, response);
  },
  
  createRecord: function(store, storeKey) {
    // TODO: Add handlers to submit new records to the data source.
    // call store.dataSourceDidComplete(storeKey) when done.
    var obj = store.readDataHash(storeKey);
    obj['guid'] = storeKey;
    SC.Request.postUrl('/tasks').header({
                'Accept': 'application/json'
            }).json()
      .notify(this, 'didCreateTask', store, storeKey)
      .send(obj);
    return YES;
  },
  
  didCreateTask: function(response, store, storeKey) {
    if (SC.ok(response)) {
      var task = response.get('body');
      console.log(task);
      store.dataSourceDidComplete(storeKey, task, task['guid']);

    } else store.dataSourceDidError(storeKey, response);
  },
    
  didDestroyRecord: function(response, store, storeKey){
    if (SC.ok(response)) {
      store.dataSourceDidDestroy(storeKey);
    } else store.dataSourceDidError(response);
  },
  
  destroyRecord: function(store, storeKey) {
    SC.Request.deleteUrl('/tasks/'+store.idFor(storeKey)).header({
      'Accept': 'application/json'
      }).json()
      .notify(this, 'didDestroyTask', store, storeKey)
      .send();
    return YES;
  }  
}) ;

todo.js

// ==========================================================================
// Project:   Todos
// Copyright: @2011 My Company, Inc.
// ==========================================================================
/*globals Todos */

Todos = SC.Application.create({
  store: SC.Store.create({commitRecordsAutomatically: YES}).from('Todos.TaskDataSource')
  //store: SC.Store.create().from('SC.FixturesDataSource')
});

Todos.Todo = SC.Record.extend({
  title: SC.Record.attr(String)
  , isDone: SC.Record.attr(Boolean, { defaultValue: NO })
});

Todos.CreateTodoView = SC.TextField.extend({
  insertNewline: function() {
    var value = this.get('value');
 
    if (value) {
      Todos.todoListController.createTodo(value);
      this.set('value', '');
    }
  }
});

Todos.StatsView = SC.TemplateView.extend({
  remainingBinding: 'Todos.todoListController.remaining',
 
  displayRemaining: function() {
    var remaining = this.get('remaining');
    return remaining + (remaining === 1 ? " item" : " items");
  }.property('remaining')
});

Todos.MarkDoneView = SC.Checkbox.extend({
  titleBinding: '.parentView.content.title'
  , valueBinding: '.parentView.content.isDone'
});

SC.ready(function() {
  Todos.mainPane = SC.TemplatePane.append({
    layerId: 'todos',
    templateName: 'todos'
  });
  
  var todos = Todos.store.find(Todos.Todo);
  Todos.todoListController.set('content',todos);
});

Todos.todoListController = SC.ArrayController.create({
  content: [],
  
  createTodo: function(title) {
    Todos.store.createRecord(Todos.Todo, { title: title, isDone:false });
  },
  
  remaining: function() {
    return this.filterProperty('isDone', false).get('length');
  }.property('@each.isDone'),
  
  clearCompletedTodos: function() {
    this.filterProperty('isDone', true).forEach(function(item){
      item.destroy();
    });
  },
  
  allAreDone: function(key,value){
    if (value !== undefined){
      this.setEach('isDone',value);
      return value;
    } else {
      return this.get('length') && this.everyProperty('isDone', true);
    }
  }.property('@each.isDone')
});

todos.handlebars

<h1>Todos</h1>
{{#view Todos.CreateTodoView}}
<input id="new-todo" type="text"
       placeholder="What needs to be done?" />
{{/view}}

{{#view Todos.StatsView id="stats"}}
	{{#view SC.Button classBinding="isActive"
		target="Todos.todoListController"
		action="clearCompletedTodos"}}
			Clear Completed Todos
	{{/view}}
	{{displayRemaining}} remaining.
{{/view}}

{{view SC.Checkbox class="mark-all-done"
	title="Mark All as Done" valueBinding="Todos.todoListController.allAreDone"}}

{{#collection SC.TemplateCollectionView contentBinding="Todos.todoListController" itemClassBinding="content.isDone"}}
	{{view Todos.MarkDoneView}}
{{/collection}}