zoukankan      html  css  js  c++  java
  • 来自一个Backbone的Hello,World!

    MVC写这种程序真是够大材小用的了,可没想到居然这么抽象!

    // 这是一个管理者视图/控制/模型 的全局类  
    var App = {  
        Models: {},  
        Views: {},  
        Controllers: {},  
        Collections: {},  
        initialize: function() {  
            new App.Controllers.Routes();  
            Backbone.history.start() // 要驱动所有的Backbone程序,Backbone.history.start()是必须的。  
        }  
    };
    
    App.Models.Hello = Backbone.Model.extend({  
        url: function() {  
            return '/api.php'; // 获得数据的后台地址。  
        },  
        initialize: function() {  
            this.set({'message':'hello world'}); // 前端定义一个message字段,name字段由后端提供。  
        }  
    });
    
    App.Views.Hello = Backbone.View.extend({  
        el: $("body"),  
        template: $("#<span style="font-family: monospace; white-space: pre; ">hello-container-template</span>").html(),  
        initialize: function(options){  
            this.options = options;  
            this.bind('change', this.render);  
            this.model = this.options.model;  
        },  
        render: function(){ // render方法,目标只有两个:填充this.el,返回this以便链式操作。  
            $(this.el).html(Mustache.to_html($(this.el).template,this.model.toJSON()) );  
            return this;
        }  
    });
    
    App.Controllers.Routes = Backbone.Controller.extend({
        routes: {
            "!/hello" : "hello",//使用#!/hello驱动路由  
        },  
        hello : function() {
            //新建一个模型,模型向后端请求更新内容成功后根据模型渲染新页面  
            var helloModel = new App.Models.Hello;  
            helloModel.fetch({ 
                success: function(model){  
                    var helloView = new App.Views.Hello({model: model});  
                    helloView.trigger('change');  
                }  
            });
        }
    });  
    App.initialize();  
  • 相关阅读:
    SQL Prompt 5.3.4.1
    RIA(富客户端)发展态势
    XML操作:2.LINQ TO XML(http://www.cnblogs.com/AlexLiu/archive/2008/10/27/linq.html)
    XML操作:1.XML类(http://blog.csdn.net/happy09li/article/details/7460521)
    .NET的Snk使用方法
    PictureEdit中拖放图片
    CPU与内存(经典问答)
    SQL Server 2008 Data Types and Entity Framework 4
    8086、80x86(IA-32)、64(IA-64)位CPU发展
    MVC3 Razor模板引擎
  • 原文地址:https://www.cnblogs.com/zcynine/p/5170826.html
Copyright © 2011-2022 走看看