zoukankan      html  css  js  c++  java
  • [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>
  • 相关阅读:
    解决ubuntu中zip解压的中文乱码问题
    GCC 静态库和动态库
    交互式shell和非交互式shell、登录shell和非登录shell的区别
    牛顿迭代法实现平方根函数sqrt
    Sqrt函数高效实现
    Http、tcp、Socket连接区别
    C++11的一般概念——The C++ standard library, 2nd Edition 笔记(二)
    C++11新特性——The C++ standard library, 2nd Edition 笔记(一)
    【Java线程与内存分析工具】VisualVM与MAT简明教程
    Java设计模式:Proxy(代理)模式
  • 原文地址:https://www.cnblogs.com/Answer1215/p/3911590.html
Copyright © 2011-2022 走看看