[Backbone] First Application!!!!

最新推荐文章于 2025-09-06 08:01:57 发布

weixin_30484739

最新推荐文章于 2025-09-06 08:01:57 发布

阅读量108

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/3911590.html

本文介绍了一个使用Backbone.js框架创建简单待办事项应用的例子。文章详细解释了如何通过Model、View、Collection以及CollectionView来组织应用程序，并展示了如何利用事件监听进行数据操作。

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>