zoukankan      html  css  js  c++  java
  • Backbone 学习4

    (function($){
        var Item=Backbone.Model.extend({
            defaults:{
                part1:"hello",
                part2:"world"
            }
        });
        var List=Backbone.Collection.extend({
            model:Item
        });
    
        var ItemView=Backbone.View.extend({
            tagName:'li',
            initialize:function(){
                _.bindAll(this,'render');
            },
            render:function(){
                $(this.el).html("<span>"+this.model.get("part1")+" "+this.model.get("part2")+"</span>");
                return this;
            }
        });
        var ListView=Backbone.View.extend({
            el:$("body"),
            events:{
                "click button#add":"addItem"
            },
            initialize:function(){
                _.bindAll(this,"render","addItem","appendItem");
                this.collection=new List();
                this.collection.bind("add",this.appendItem);
                this.counter=0;
                this.render();
            },
            render:function(){
                var self=this;
                $(this.el).append("<button id='add'>Add list item</button>");
                $(this.el).append("<ul></ul>");
                _(this.collection.models).each(function(item){
                    self.appendItem(item);
                },this);
            },
            addItem:function(){
                this.counter++;
                var item=new Item();
                item.set({
                    part2:item.get("part2")+this.counter
                });
                this.collection.add(item);
            },
            appendItem:function(item){
                var itemView=new ItemView({
                    model:item
                });
                $("ul",this.el).append(itemView.render().el);
            }
        })
        var listView=new ListView();
    })(jQuery)
  • 相关阅读:
    3.1.3、控制结构
    3.1.2、变量
    3.1.1、渲染模板
    3.1、Jinja2模板引擎
    第3章 模板
    2.6、Flask扩展
    2.5.4、响应
    2.5.3、请求钩子
    2.5.2、请求调度
    2.5.1、程序和请求上下文
  • 原文地址:https://www.cnblogs.com/wangwenfei/p/Backbone_javascript_Underscore.html
Copyright © 2011-2022 走看看