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>
  • 相关阅读:
    Hive metastore三种配置方式
    hive学习(一)hive架构及hive3.1.1三种方式部署安装
    hiveserver2的配置和启动
    spark安装配置
    Sqoop-1.4.6安装部署及详细使用介绍
    搭建本地yum源服务器
    Centos7.X安装impala(RPM方式)
    Hive安装与配置详解
    【图文详解】Hadoop集群搭建(CentOs6.3)
    Linux下实现免密码登录(超详细)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/3911590.html
Copyright © 2011-2022 走看看