Merge pull request #1 from coding-kata/refactoring-to-backbone

migrate jquery to backbone

Author: azu

app.js

@@ -4,7 +4,9 @@
 <meta charset="utf-8">
 <title>Sample</title>
 <script src="./vendor/jquery-1.11.2.min.js"></script>
-<script src="app.js"></script>
+<script src="./vendor/underscore.js"></script>
+<script src="./vendor/backbone.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">

index.html

@@ -9,7 +9,9 @@
   },
   "main": "index.js",
   "scripts": {
-    "start":"http-server",
+    "start": "http-server",
+    "build": "browserify src/app.js -t 6to5ify -o lib/bundle.js",
+    "watch": "watchify src/app.js -d -t 6to5ify -o lib/bundle.js",
     "test": "mocha test/*.js"
   },
   "directories": {
@@ -21,12 +23,15 @@
     "url": "https://github.com/coding-kata/todo-app-jquery-to-backbone/issues"
   },
   "devDependencies": {
+    "6to5ify": "^3.1.2",
+    "browserify": "^8.1.1",
     "espower-loader": "^0.10.0",
     "http-server": "^0.7.4",
     "intelli-espower-loader": "^0.6.0",
     "mocha": "^2.1.0",
     "phantomjs": "^1.9.13",
     "power-assert": "^0.10.1",
-    "testium": "^2.3.0"
+    "testium": "^2.3.0",
+    "watchify": "^2.2.1"
   }
 }

lib/bundle.js

@@ -0,0 +1,30 @@
+import TodoItemView from "./todo-item-view.js"
+import TodoItem from "./todo-item-model.js"
+import TodoItemList from "./todo-item-collection.js"
+
+$(function () {
+    var $form = $('.todoForm');
+    var $list = $('.todoList');
+    var todoItemList = new TodoItemList();
+    todoItemList.on("add", function (todoItem) {
+        var item = new TodoItemView({model: todoItem});
+        var list = item.render().el;
+        $list.append(list);
+    });
+
+    function createTodoItem(text) {
+        todoItemList.add({
+            title: text
+        });
+    }
+
+    $form.on('submit', function (e) {
+        e.preventDefault();
+
+        var $input = $('input[type="text"]');
+        var val = $input.val();
+        createTodoItem(val);
+
+        $input.val('');
+    });
+});

package.json

@@ -0,0 +1,11 @@
+// LICENSE : MIT
+"use strict";
+var {Collection} = Backbone;
+import TodoItem from "./todo-item-model.js"
+class TodoItemList extends Collection {
+    constructor(options) {
+        super(options);
+        this.model = TodoItem;
+    }
+}
+export default TodoItemList;

src/app.js

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

src/todo-item-collection.js

@@ -0,0 +1,44 @@
+// LICENSE : MIT
+"use strict";
+var {View} = Backbone;
+class TodoItemView extends View {
+    constructor(options) {
+        this.tagName = 'li';
+
+        // *Cache the template function for a single item.*
+        this.template = _.template(`
+        <input type="checkbox" class="<%= completed ? 'is-complete' : '' %>" <%= completed ? 'checked' : '' %>>
+            <span class="todoText"><%- title %></span>
+        <i class="removeBtn fa fa-times"></i>
+        `);
+        // *Define the DOM events specific to an item.*
+        this.events = {
+            'click input': this.toggleComplete,
+            'click .removeBtn': this.removeItem
+        };
+        super(options);
+
+        this.listenTo(this.model, 'change', this.render);
+        this.listenTo(this.model, 'destroy', this.remove);
+    }
+
+    // *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() {
+        this.model.toggle();
+    }
+
+    removeItem() {
+        if (!window.confirm('消しますよ')) {
+            return;
+        }
+        this.model.destroy();
+        return this;
+    }
+}
+export default TodoItemView;

src/todo-item-model.js

@@ -8,7 +8,7 @@ function addTodo(text) {
     browser.click('.todoBtn');
 }
 describe("app-test", function () {
-    var text = 'todo test';
+    var text = 'todo text';
     before(injectBrowser());
     beforeEach(function () {
         browser = this.browser;