[Backbone] First Application!!!!

Important things to remember:

1. Usually, we create Collection, CollectionViews, Model, View.

Collection <--> CollectionViews

Moel <--> View

2. Application can start from CollectionView or View by creating other instance.

3. Uisng a grobel App object to control everything.

4. CollectionView: the function is to render grobel interface and existing data to

the html. In initialize function, to create instance object of collection, and listen to events.

Events is model events! And don't forget calling render() fucnton.!

5. Collection just pass a model object.

6. Single modle is to fetch data and set defaults data.

7. Single view is to create tag, listenTo model events. Create user generate events{}.

(function(){
    var App = {
        Collections : {},
        Models : {},
        Views : {}
    };
    App.Models.ToDoItem = Backbone.Model.extend({
        defaults:{firstName: "Zhentian", lastName: "Wan"}
    });
    App.Views.ToDoItem = Backbone.View.extend({
        tagName: 'li',
        initialize: function(){
            _.bindAll(this, 'render', 'swap', 'remove', 'unrender');
            this.listenTo(this.model, 'change', this.render);
            this.listenTo(this.model, 'remove', this.unrender);
        },
        events: {
            'click span.swap': 'swap',
            'click span.delete': 'remove'
        },
        render: function(){
            this.$el.html('<span style="color:black;">'+this.model.get('firstName')+' '+this.model.get('lastName')+'</span> &nbsp; &nbsp; <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
            return this;
        },
        swap: function(){
            var swapped = {
                firstName: this.model.get('lastName'),
                lastName: this.model.get('firstName')
            };
            this.model.set(swapped);    
        },
        remove: function(){
            this.model.destroy();
        },
        unrender: function(){
            this.$el.remove();
        }
    });
    App.Collections.ToDoList = Backbone.Collection.extend({model: App.Models.ToDoItem});
    App.Views.ListView = new (Backbone.View.extend({
        el: $('body'),
        initialize: function(){
            _.bindAll(this, 'render', 'appendItem', 'addItem');
            this.collection = new App.Collections.ToDoList();
            this.listenTo(this.collection, 'add', this.appendItem);
            this.render();
            this.counter = 0;
        },
        events:{
            'click button#add': 'addItem'
        },
        render: function(){
            this.$el.html('<button id="add">Click to add</button><ul></ul>');
            return this;
        },
        addItem: function(){
            var item = new App.Models.ToDoItem();
            item.set({lastName: 'Yoona'+' '+(++this.counter)});
            this.collection.add(item);
        },
        appendItem: function(item){
            var itemView = new App.Views.ToDoItem({model: item});
            $('ul', this.el).append(itemView.render().el);
        }
    }))();
})();

<!DOCTYPE html>
<html>
    <head>
        <title>Angular Directive</title>
        <link rel="stylesheet" href="foundation.min.css" />
        <script src="angular.min.js"></script>
        <script src="main.js"></script>
    </head>
    <body >
     <div ng-app="superApp">
        <superhero flight speed strength>Superman</superhero>
        <superhero speed>The Flash</superhero>
        <superhero strength>The Hulk</superhero>
      </div>
    </body>
</html>

相关阅读:
mybatis
Enumeration接口
 oracle undo 解析（转载收藏）
Windows下RabbitMQ的安装
 Aliyun服务器安装Docker
Redis主从复制、哨兵模式
 Redis持久化-AOF
Redis持久化-RDB
Nginx快速上手
 有关Eureka的其他重点配置
原文地址：https://www.cnblogs.com/Answer1215/p/3911590.html