taise · December 17, 2015 12:09
diff --git a/index.html b/index.html
 <!doctype html>
 <head>
  <meta charset="utf-8">

  <title>jsCafe Todo</title>
  <meta name="description" content="jsCafe Todo">
  <meta name="viewport" content="width=device-width">
  <script type="text/javascript" src="http://underscorejs.org/underscore.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.7.min.js"></script>
 </head>

 <body>
  
  <div id="main">
    <form id="todo_form">
      <input type="text" id="title">
      <input type="submit" value="add">
    </form>
    <div id="error"></div>
    <div id="todoList">
      <ul></ul>
    </div>
    <strong>scriptタグ内の"APPLICATION_ID"と"JAVASCRIPT_KEY"を各自のものに変更してから実行してみてください。</strong>
  <script type="text/javascript">
    $(function(){
        // imput your 
        Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY");

        // Model
        var Todo = Parse.Object.extend({
            className: "Todo",
            validate: function(attrs){
              // 追加したtaskが空の場合、メッセージを表示する
              if(_.isEmpty(attrs.title)){
                  return "please write text!";
                }
            }
          });

        // Collection
        var TodoList = Parse.Collection.extend({ model: Todo});

        // Model View
        var TodoView = Parse.View.extend({
            template: _.template($('#todo-template').html()),
            render: function(){
              this.$el.html(this.template(this.model.toJSON()));
              return this;
            }
          });

        // Collection View
        var TodoListView = Parse.View.extend({
          el: "#todoList > ul",
          initialize: function(){
            this.collection.on("add", this.add_todo, this);
            this.render();
          },
          // 追加したtaskをDOMに追加
          add_todo: function(todo){
            var todoView = new TodoView({model:todo});
            this.$el.append(todoView.render().el);
            $('#title').val('').focus();
          },
          render: function() {
            this.collection.each(function(todo) {
              this.add_todo(todo);
              },this);
            return this;
          }
        });

        // View Form
        var TodoFormView = Parse.View.extend({
          el: "#todo_form",
          events: { "submit": "create_todo" },
          create_todo: function(e) {
            e.preventDefault();
            var todo = new Todo();
            todo.set({title : $('#title').val()},
            {error : function(model, error) {
              $('#error').html(error);
            }});
            if(todo.isValid()) {
              $('#error').html('');
              var todo_form = this;
              todo.save(null, {
                success: function(todo) {
                  todo_form.collection.add(todo); 
                }
              });
            };
          }
        });

        // View App
        var AppView = Parse.View.extend({
          initialize: function(){
            this.render();
          },
          render: function(){
            new Parse.Query("Todo").find({
              success: function(list){
                var todoList = new TodoList(list);
                var todoListView =  new TodoListView({collection: todoList});
                var todoFormView = new TodoFormView({collection: todoList});
              }
            });
            return this;
          }
        });
        new AppView;

        // Router
        var TodoRouter = Parse.Router.extend({
          routes: {
            "help" : "show_help",
            "main" : "show_main"
          },
          show_help : function() {
            $('#main').hide();
            $("span.help").show();
          },
          show_main : function() {
            $("span.help").hide();
            $('#main').show();
          }
        });
        var todoRouter = new TodoRouter;
        Parse.history.start();

        });
  </script>
  <script type="text/template" id="todo-template">
    <strong>[TODO]</strong>
    <span><%- title %></span>
  </script>
 </body>

 </html>
	<!doctype html>
	<head>
	<meta charset="utf-8">

	<title>jsCafe Todo</title>
	<meta name="description" content="jsCafe Todo">
	<meta name="viewport" content="width=device-width">
	<script type="text/javascript" src="http://underscorejs.org/underscore.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.7.min.js"></script>
	</head>

	<body>

	<div id="main">
	<form id="todo_form">
	<input type="text" id="title">
	<input type="submit" value="add">
	</form>
	<div id="error"></div>
	<div id="todoList">
	<ul></ul>
	</div>
	<strong>scriptタグ内の"APPLICATION_ID"と"JAVASCRIPT_KEY"を各自のものに変更してから実行してみてください。</strong>
	<script type="text/javascript">
	$(function(){
	// imput your
	Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY");

	// Model
	var Todo = Parse.Object.extend({
	className: "Todo",
	validate: function(attrs){
	// 追加したtaskが空の場合、メッセージを表示する
	if(_.isEmpty(attrs.title)){
	return "please write text!";
	}
	}
	});

	// Collection
	var TodoList = Parse.Collection.extend({ model: Todo});

	// Model View
	var TodoView = Parse.View.extend({
	template: _.template($('#todo-template').html()),
	render: function(){
	this.$el.html(this.template(this.model.toJSON()));
	return this;
	}
	});

	// Collection View
	var TodoListView = Parse.View.extend({
	el: "#todoList > ul",
	initialize: function(){
	this.collection.on("add", this.add_todo, this);
	this.render();
	},
	// 追加したtaskをDOMに追加
	add_todo: function(todo){
	var todoView = new TodoView({model:todo});
	this.$el.append(todoView.render().el);
	$('#title').val('').focus();
	},
	render: function() {
	this.collection.each(function(todo) {
	this.add_todo(todo);
	},this);
	return this;
	}
	});

	// View Form
	var TodoFormView = Parse.View.extend({
	el: "#todo_form",
	events: { "submit": "create_todo" },
	create_todo: function(e) {
	e.preventDefault();
	var todo = new Todo();
	todo.set({title : $('#title').val()},
	{error : function(model, error) {
	$('#error').html(error);
	}});
	if(todo.isValid()) {
	$('#error').html('');
	var todo_form = this;
	todo.save(null, {
	success: function(todo) {
	todo_form.collection.add(todo);
	}
	});
	};
	}
	});

	// View App
	var AppView = Parse.View.extend({
	initialize: function(){
	this.render();
	},
	render: function(){
	new Parse.Query("Todo").find({
	success: function(list){
	var todoList = new TodoList(list);
	var todoListView = new TodoListView({collection: todoList});
	var todoFormView = new TodoFormView({collection: todoList});
	}
	});
	return this;
	}
	});
	new AppView;

	// Router
	var TodoRouter = Parse.Router.extend({
	routes: {
	"help" : "show_help",
	"main" : "show_main"
	},
	show_help : function() {
	$('#main').hide();
	$("span.help").show();
	},
	show_main : function() {
	$("span.help").hide();
	$('#main').show();
	}
	});
	var todoRouter = new TodoRouter;
	Parse.history.start();

	});
	</script>
	<script type="text/template" id="todo-template">
	<strong>[TODO]</strong>
	<span><%- title %></span>
	</script>
	</body>

	</html>
No results found