feat(app): add TodoItemView and TodoItem(model)

- To create element, use TodoItemView instead of jQuery DOM
- not handle event yet.

Author: azu

index.html

@@ -4,7 +4,9 @@
 <meta charset="utf-8">
 <title>Sample</title>
 <script src="./vendor/jquery-1.11.2.min.js"></script>
-<script src="src/app.js"></script>
+<script src="node_modules/underscore/underscore-min.js"></script>
+<script src="node_modules/backbone/backbone-min.js"></script>
+<script src="lib/bundle.js"></script>
 <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">

package.json

@@ -35,6 +35,7 @@
     "watchify": "^2.2.1"
   },
   "dependencies": {
-    "backbone": "^1.1.2"
+    "backbone": "^1.1.2",
+    "underscore": "^1.7.0"
   }
 }

src/app.js

@@ -1,24 +1,30 @@
+import TodoItemView from "./todo-item-view.js"
+import TodoItem from "./todo-item-model.js"
 $(function () {
     var $form = $('.todoForm');
     var $list = $('.todoList');
 
 
     function createTodoItem(text) {
-        var $li = $('<li>');
-        var $text = $('<span>').addClass('todoText').text(text);
-        var $checkbox = $('<input type="checkbox">');
-        var $remove = $('<i>').addClass('removeBtn fa fa-times');
-        $remove.on('click', function () {
-            if (!window.confirm('消しますよ')) {
-                return;
-            }
-            $li.remove();
+        var model = new TodoItem({
+            title: text
         });
-        $checkbox.on('click', function () {
-            $li.toggleClass('is-complete');
-        });
-        $li.append($checkbox, $text, $remove);
-        return $li;
+        var item = new TodoItemView({model});
+        //var $li = $('<li>');
+        //var $text = $('<span>').addClass('todoText').text(text);
+        //var $checkbox = $('<input type="checkbox">');
+        //var $remove = $('<i>').addClass('removeBtn fa fa-times');
+        //$remove.on('click', function () {
+        //    if (!window.confirm('消しますよ')) {
+        //        return;
+        //    }
+        //    $li.remove();
+        //});
+        //$checkbox.on('click', function () {
+        //    $li.toggleClass('is-complete');
+        //});
+        //$li.append($checkbox, $text, $remove);
+        return item.render().el;
     }
 
     $form.on('submit', function (e) {

src/todo-item-model.js

@@ -0,0 +1,12 @@
+// LICENSE : MIT
+"use strict";
+var {Model} = Backbone;
+class TodoItem extends Model {
+    defaults() {
+        return {
+            title: '',
+            completed: false
+        };
+    }
+}
+export default TodoItem;

src/todo-item-view.js

@@ -0,0 +1,37 @@
+// LICENSE : MIT
+"use strict";
+var {View} = Backbone;
+class TodoItemView extends View {
+    constructor(options) {
+        // *... is a list tag.*
+        this.tagName = 'li';
+        // *Cache the template function for a single item.*
+        this.template = _.template(`
+        <input type="checkbox">
+            <span class="todoText"><%- title %></span>
+        <i class="removeBtn fa fa-times"></i>
+        `);
+        this.input = '';
+        // *Define the DOM events specific to an item.*
+        this.events = {
+            'click input': 'toggleComplete',
+            'click .removeBtn': 'removeItem'
+        };
+        super(options);
+    }
+
+    // *Re-render the contents of the todo item.*
+    render() {
+        this.$el.html(this.template(this.model.toJSON()));
+        this.$el.toggleClass('completed', this.model.get('completed'));
+        return this;
+    }
+
+    toggleComplete() {
+
+    }
+
+    removeItem() {
+    }
+}
+export default TodoItemView;