來自一個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();