Backbone.jsのViewを復習 その3

その2からもうちょっと使いやすく https://app.codegrid.net/entry/backbone-view

by FiNGAHOLiC

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<h1>My Todo List</h1>
<form class="form">
    <input type="text" class="input" placeholder="What needs to be done?"><input type="submit" value="追加" class="submit">
</form>
<div class="lists"></div>
<script type="text/template" class="js-tmpl-item">
    <div class="block1">
        <span><%= text %></span>
        <input type="button" value="削除" class="delete">
        <input type="button" value="編集" class="edit">
    </div>
    <form class="block2 hide">
        <span><input type="text" value="<%= text %>" class="input"></span>
        <input type="submit" value="更新" class="update">
        <input type="reset" value="キャンセル" class="cancel">
    </form>
</script>

CSS

.hide { display: none; }

JavaScript

// DONE:
// テキストフィールドにplaceholderを追加
// 追加後、テキストフィールドを空にし、フォーカスを当てる
// 削除ボタンを追加
// 編集ボタンを追加
// 空文字の判定を_.isEmpty()で判定
// 編集部分をformにしてenterで叩けるように
// 編集部分のボタンタグをsubmitとresetに

// モデル作成時にvalidate通してからエラー判定出来る？
(function(){
    
    var Todo = Backbone.Model.extend({});
    
    var Todos = Backbone.Collection.extend({
        model: Todo
    });
    
    var TodoForm = Backbone.View.extend({
        collection: null,
        events: {
            'submit': 'add'
        },
        initialize: function(){
            this.$input = this.$('.input');
        },
        add: function(e){
            e.preventDefault();
            var todo = this.$input.val();
            if(!_.isEmpty(todo)){
                this.$input.val('').focus();
                this.collection.add({ text: todo });
            };
        }
    });
    
    var TodoList = Backbone.View.extend({
        collection: null,
        initialize: function(){
            this.collection.on('add', this.render, this);
        },
        render: function(todo){
            var item = new TodoListItem({ model: todo });
            this.$el.append(item.render().el);
        }
    });
    
    var TodoListItem = Backbone.View.extend({
        className: 'list',
        model: null,
        events: {
            'click .delete': 'delete',
            'click .edit': 'edit',
            'submit': 'update',
            'reset': 'cancel'
        },
        tmpl: $('.js-tmpl-item').html(),
        initialize: function(){
            this.model.on('change:text', this.render, this);
        },
        render: function(e){
            this.$el.html(_.template(this.tmpl, this.model.toJSON()));
            this.$block1 = this.$('.block1');
            this.$block2 = this.$('.block2');
            this.$input = this.$('.input');
            return this;
        },
        delete: function(){
            // http://stackoverflow.com/a/11534056
            this.model.destroy();
            this.undelegateEvents();
          ...