August 26, 2013 17:20
diff --git a/jsbin.iDociSu.html b/jsbin.iDociSu.html
 <html>
 <head>
  <style>
    /*完了したタスクは横線を引きグレーにする*/
    .completed {
      text-decoration: line-through;
      color: gray;
    }
  </style>
  <script type="text/template" id="task-template">
    <input type="checkbox" class="toggle" <%= completed ? 'checked': ''%>>
    <span class=<%= completed ? 'completed': ''%>>
      <%- title %>
    </span>
    <span class="delete">[x]</span>
  </script>
  <!-- jQueryはBackbone（ここではParse）よりも先に呼ばなければならない -->
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
  <script src="http://www.parsecdn.com/js/parse-1.2.9.min.js"></script>
 </head>
 <body>
  <h1>Tasks</h1>
  
  <!-- タスク追加のためのフォーム -->
  <form id="addTask">
    <input type="test" id="title">
    <input type="submit" value="add">
    <!-- titleが空欄のときはエラーメッセージを出す -->
    <span id="error"></span>
  </form>

  <!-- タスク一覧 -->
  <div id="tasks"></div>

  <!-- タスク残数 -->
  <p>Tasks left: <span id="count"></span></p>

  <!-- タスク表示用テンプレート -->
  <script type="text/template" id="task-template">
    <%- title %>
  </script>

  <script src="index.js"></script>
 </body>
 </html>
diff --git a/jsbin.iDociSu.js b/jsbin.iDociSu.js
 // Generated by CoffeeScript 1.6.3
 (function() {
  var AddTaskView, Task, TaskView, Tasks, TasksView, addTaskView, query, tasks, tasksView;

  Parse.initialize("nhtWYRYgjOpV4mqW65aZ7jxIUyfzPZeDmaipDdSb", "mmPU7ta2AMipx3mYeLkufOvu0LaA3iU3Atrh9qb5");

  Task = Parse.Object.extend({
    className: 'Task',
    defaults: {
      title: "do something",
      completed: false
    },
    validate: function(attributes) {
      if (_.isEmpty(attributes.title)) {
        return $('#error').html('title must not be empty');
      }
    },
    toggle: function() {
      return this.save({
        completed: !this.get("completed")
      });
    }
  });

  Tasks = Parse.Collection.extend({
    model: Task
  });

  TaskView = Parse.View.extend({
    tagName: 'li',
    initialize: function() {
      this.model.on('destroy', this.remove, this);
      return this.model.on('change', this.render, this);
    },
    events: {
      'click .delete': 'destroy',
      'click .toggle': 'toggle'
    },
    toggle: function() {
      return this.model.toggle();
    },
    destroy: function() {
      if (confirm('are you sure?')) {
        return this.model.destroy();
      }
    },
    remove: function() {
      return this.$el.remove();
    },
    template: _.template($('#task-template').html()),
    render: function() {
      var template;
      template = this.template(this.model.toJSON());
      this.$el.html(template);
      return this;
    }
  });

  TasksView = Parse.View.extend({
    tagName: 'ul',
    initialize: function() {
      this.collection.on('add', this.addNew, this);
      this.collection.on('change', this.updateCount, this);
      return this.collection.on('destroy', this.updateCount, this);
      /*
      this.todos = new TodoList;
      this.todos.query = new Parse.Query(Todo);
      this.todos.query.equalTo("user", Parse.User.current());
      this.todos.fetch();
      */

    },
    addNew: function(task) {
      var taskView;
      taskView = new TaskView({
        model: task
      });
      this.$el.append(taskView.render().el);
      $('#title').val('').focus();
      return this.updateCount();
    },
    updateCount: function() {
      var uncompletedTasks;
      uncompletedTasks = this.collection.filter(function(task) {
        return !task.get('completed');
      });
      return $('#count').html(uncompletedTasks.length);
    },
    render: function() {
      var _this = this;
      this.collection.each(function(task) {
        var taskView;
        taskView = new TaskView({
          model: task
        });
        return _this.$el.append(taskView.render().el);
      });
      this.updateCount();
      return this;
    }
  });

  AddTaskView = Parse.View.extend({
    el: '#addTask',
    events: {
      'submit': 'submit'
    },
    submit: function(e) {
      var task;
      e.preventDefault();
      task = new Task;
      if (task.save({
        title: $('#title').val()
      })) {
        this.collection.add(task);
        return $('#error').empty();
      }
    }
  });

  tasks = new Tasks;

  query = new Parse.Query(Task);

  tasks.query = query;

  tasks.fetch();

  $.when(tasks.fetch()).done(function() {
    return console.log(tasks);
  });
 // considering Async but this returns '[]', too. 


  addTaskView = new AddTaskView({
    collection: tasks
  });

  tasksView = new TasksView({
    collection: tasks
  });

  $('#tasks').html(tasksView.render().el);

 }).call(this);
	<html>
	<head>
	<style>
	/完了したタスクは横線を引きグレーにする/
	.completed {
	text-decoration: line-through;
	color: gray;
	}
	</style>
	<script type="text/template" id="task-template">
	<input type="checkbox" class="toggle" <%= completed ? 'checked': ''%>>
	<span class=<%= completed ? 'completed': ''%>>
	<%- title %>
	</span>
	<span class="delete">[x]</span>
	</script>
	<!-- jQueryはBackbone（ここではParse）よりも先に呼ばなければならない -->
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
	<script src="http://www.parsecdn.com/js/parse-1.2.9.min.js"></script>
	</head>
	<body>
	<h1>Tasks</h1>

	<!-- タスク追加のためのフォーム -->
	<form id="addTask">
	<input type="test" id="title">
	<input type="submit" value="add">
	<!-- titleが空欄のときはエラーメッセージを出す -->
	<span id="error"></span>
	</form>

	<!-- タスク一覧 -->
	<div id="tasks"></div>

	<!-- タスク残数 -->
	<p>Tasks left: <span id="count"></span></p>

	<!-- タスク表示用テンプレート -->
	<script type="text/template" id="task-template">
	<%- title %>
	</script>

	<script src="index.js"></script>
	</body>
	</html>
	// Generated by CoffeeScript 1.6.3
	(function() {
	var AddTaskView, Task, TaskView, Tasks, TasksView, addTaskView, query, tasks, tasksView;

	Parse.initialize("nhtWYRYgjOpV4mqW65aZ7jxIUyfzPZeDmaipDdSb", "mmPU7ta2AMipx3mYeLkufOvu0LaA3iU3Atrh9qb5");

	Task = Parse.Object.extend({
	className: 'Task',
	defaults: {
	title: "do something",
	completed: false
	},
	validate: function(attributes) {
	if (_.isEmpty(attributes.title)) {
	return $('#error').html('title must not be empty');
	}
	},
	toggle: function() {
	return this.save({
	completed: !this.get("completed")
	});
	}
	});

	Tasks = Parse.Collection.extend({
	model: Task
	});

	TaskView = Parse.View.extend({
	tagName: 'li',
	initialize: function() {
	this.model.on('destroy', this.remove, this);
	return this.model.on('change', this.render, this);
	},
	events: {
	'click .delete': 'destroy',
	'click .toggle': 'toggle'
	},
	toggle: function() {
	return this.model.toggle();
	},
	destroy: function() {
	if (confirm('are you sure?')) {
	return this.model.destroy();
	}
	},
	remove: function() {
	return this.$el.remove();
	},
	template: _.template($('#task-template').html()),
	render: function() {
	var template;
	template = this.template(this.model.toJSON());
	this.$el.html(template);
	return this;
	}
	});

	TasksView = Parse.View.extend({
	tagName: 'ul',
	initialize: function() {
	this.collection.on('add', this.addNew, this);
	this.collection.on('change', this.updateCount, this);
	return this.collection.on('destroy', this.updateCount, this);
	/*
	this.todos = new TodoList;
	this.todos.query = new Parse.Query(Todo);
	this.todos.query.equalTo("user", Parse.User.current());
	this.todos.fetch();
	*/

	},
	addNew: function(task) {
	var taskView;
	taskView = new TaskView({
	model: task
	});
	this.$el.append(taskView.render().el);
	$('#title').val('').focus();
	return this.updateCount();
	},
	updateCount: function() {
	var uncompletedTasks;
	uncompletedTasks = this.collection.filter(function(task) {
	return !task.get('completed');
	});
	return $('#count').html(uncompletedTasks.length);
	},
	render: function() {
	var _this = this;
	this.collection.each(function(task) {
	var taskView;
	taskView = new TaskView({
	model: task
	});
	return _this.$el.append(taskView.render().el);
	});
	this.updateCount();
	return this;
	}
	});

	AddTaskView = Parse.View.extend({
	el: '#addTask',
	events: {
	'submit': 'submit'
	},
	submit: function(e) {
	var task;
	e.preventDefault();
	task = new Task;
	if (task.save({
	title: $('#title').val()
	})) {
	this.collection.add(task);
	return $('#error').empty();
	}
	}
	});

	tasks = new Tasks;

	query = new Parse.Query(Task);

	tasks.query = query;

	tasks.fetch();

	$.when(tasks.fetch()).done(function() {
	return console.log(tasks);
	});
	// considering Async but this returns '[]', too.


	addTaskView = new AddTaskView({
	collection: tasks
	});

	tasksView = new TasksView({
	collection: tasks
	});

	$('#tasks').html(tasksView.render().el);

	}).call(this);