Backbone Persons

by junk1114

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container" id="app" style="margin-top:15px;">
    <div class="col-xs-3">
        <p>Имя:</p>
        <p><input type="text" id="name" class="form-control" autocomplete="off"></p>
    </div>
    <div class="col-xs-9">
        <p>Телефон:</p>
        <p><input type="text" id="phone" class="form-control" placeholder="+7-999-99-99" autocomplete="off"></p>
    </div>
    <div class="col-xs-12">
        <button id="add" class="btn btn-primary">Добавить</button>
    </div>
    <script id="personTemplate" type="text/template">
        <div class="panel panel-default">
            <div class="panel-body">
                <img class="person-photo" src="http://wiseheartdesign.com/images/articles/default-avatar.png">
                <p>Имя: <span class="name"><%= name %></span>, Телефон: <span class="phone"><%= phone %></span></p>
                <a href="#" id='remove' class="btn btn-xs btn-danger">Удалить</a> 
            </div>
        </div>
    </script>
    <div class="col-xs-12">
        <ul id="persons-list" style="margin-top:15px;"></ul>
    </div>
</div>

CSS

.person-photo {
    width: 64px;
    float: left;
    margin-right: 10px;
}
span.name, span.phone {
    font-weight: bold;
}
span.name:hover, span.phone:hover {
    background-color: #CCC;
}
}

JavaScript

var Person = Backbone.Model.extend({
    defaults: {
        name: '',
        phone: ''
    },
    initialize: function() {
        this.on('invalid', function(model, error) {
            alert(error);
        });     
    },
    validate: function(attrs) {
        if (attrs.name == '') {
            $('input#name').focus();
            return 'Введите имя';
        }
        else if (attrs.phone == '') {
            $('input#phone').focus();
            return 'Введите телефон';
        }
    }    
});
var PersonView = Backbone.View.extend({ // Вид пункта
    tagName: 'li',
    template: _.template($('#personTemplate').html()),
    initialize: function () {
        this.render();
        this.model.bind('change', this.render, this);
    },
    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    events: {
        'click a#remove':     'remove',
        'dblclick span.name': 'edit',
        'dblclick span.phone':'edit'
    },
    'remove': function() {
        if (confirm('Удалить контакт: ' + this.model.get('name')))
        personsList.remove(this.model.cid);
    },
    'edit': function(event) {
        var data = {};
        var prop = event.target.className;
        data[prop] = this.model.get(prop);
        data[prop] = prompt('Отредактируйте:', this.model.get(prop)) || this.model.get(prop);
        this.model.set(data, {validate: true});
    }    
});
var PersonsListView = Backbone.View.extend({ // Вид списка
    el: '#persons-list',
    initialize: function () {
        this.collection.on('add remove', this.render, this);
    },
    render: function(person) {
        this.$el.empty();
        this.collection.each(function(person) {
            var personView = new PersonView({model: person});
            this.$el.append(personView.render().el);
        }, this);
        return this;
    }
});
var PersonsList = Backbone.Collection.extend({ // Коллекция пунктов
    model: Person
});
var AppView =...