Todoアプリケーション（削除ボタン追加）

Spine.jsで簡易Todoアプリケーションを作ってみる。ちなみに最新版のSpine.jsとjquery.tmpl.jsで

by FiNGAHOLiC

HTML

<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.min.js"></script>
<script src="https://raw.github.com/maccman/spine/master/lib/spine.js"></script>
<script src="https://raw.github.com/maccman/spine/master/lib/local.js"></script>
<div id="mod-app">
    <header>簡易Todoアプリ</header>
    <div id="mod-register">
        <input type="text"><button class="create">create</button>
    </div>
    <ul id="mod-lists"></ul>
</div>

<script type="text/x-jquery-tmpl" id="mod-tmpl-task">
    <span>${task}</span><button class="delete">delete</button>
</script>

JavaScript

(function($, window, document, undefined){

    // Taskモデル
    var Task = Spine.Model.sub();
    Task.configure('Task', 'task');
    Task.extend(Spine.Model.Local);
    
    // Tasksコントローラ
    var Tasks = Spine.Controller.sub({
        // 生成する初期要素をli要素に
        tag: 'li',
        // deleteボタンが押下されたらdeleteメソッドを叩く
        events: {
            'click .delete': 'delete'
        },
        init: function(){
            // 削除されたらreleaseメソッドでel要素を削除
            this.item.bind('destroy', this.release);
        },
        delete: function(){
            // 選択されたモデルデータを削除
            this.item.destroy();
        },
        render: function(){
            // モデルデータを元にel要素に代入
            this.el.html($('#mod-tmpl-task').tmpl(this.item));
            return this;
        }
    });
    
    // Appコントローラ
    var TaskApp = Spine.Controller.sub({
        // createボタンが押下されたらcreateメソッドを叩く
        events: {
            'click .create': 'create'
        },
        elements: {
            '#mod-lists': 'items',
            'input[type=text]': 'input'
        },
        init: function(){
            // 新規タスクが作成されたらaddメソッドを叩く
            Task.bind('create', this.proxy(this.add));
            // fetchされたらaddAllメソッドを叩く
            Task.bind('refresh', this.proxy(this.addAll));
            // モデルデータをローカルストレージから取得
            Task.fetch();
        },
        add: function(task){
            // 新規ビューを作成
            var view = new Tasks({
                item: task
            });
            // ビューを描画
            this.items.append(view.render().el);
        },
        addAll: function(){
            // fetchされたらローカルストレージから取得した全モデルデータをaddメソッドで処理
            Task.each(this.proxy(this.add));
        },
        create: function(){
            // 空ならreturn
            if(!this.input.val()) return;
            // 新規タスクを作成
            Task.create({
                task: this.input.val()
            });
            // フィールドを空に
            this.input.val('');
            this.input.focus();
       ...