作者:

Backbone案例的初略理解

http://juntype.com/junlab/99.html

最近发现自己越来越不行了,做前端也有些岁月了,神马HTML5,CSS3等层出不穷,如果再不及时Update一下自己,很快也会被这个行业给淘汰了!废话不多说了,今天主要是记一下自己学习Backbone的笔记。
国内有用到这技术的有豆瓣说 阿尔法城 可能是他们比较出名。。。
前端MVC 主要讲的是在前端方面实现MVC的模板,在前端也有自己的模块,视图,控制器,这结合RESTful来做是个不错的选择,我在瘦服务端架构TSA(Thin Server Architecture)记录了一下
而Backbone只是通向前端MVC其中的一条路而已。。。
Backbone.js API中文文档
我下面的源码出自 让我们用Backbone.js来写一个HelloWorld程序 我也是通过这源码结合API进行学习 上面那篇博文有些错误,我已经修正。
这里说一下Backbone的执行顺序
路由(Backbone.Router)-> 模型(Backbone.Model)-> 视图(Backbone.View)

路由告诉你要去哪里。

App.Controllers.Routes = Backbone.Router.extend({  
    routes: {  
    "!/hello" : "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');  //绑定change事件
            }
        });
    }
});


模型告诉该干些什么。这里是去拿数据,set是提供一个设置初始数据

App.Models.Hello = Backbone.Model.extend({  
    url: function() {  
        return '/index/test'; // 获得数据的后台地址。
    },  
    initialize: function() {  
        this.set({'message':'hello world'}); // 前端定义一个message字段,name字段由后端提供。
    }  
});


最后你就知道了有什么了

App.Views.Hello = Backbone.View.extend({  
    el: "body",  //在哪里显示
    template: $("#hello-container-template").html(),  //获取模板 模板是用Mustache
    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.template,this.model.toJSON()));
        return this;
    }
});


上面就是MVC的核心了,下面就是一个管理着 视图/控制/模型 的全局类

var App = {  
    Models: {},  
    Views: {},  
    Controllers: {},  
    Collections: {},  
    initialize: function() {  
        new App.Controllers.Routes();  
        Backbone.history.start() // 要驱动所有的Backbone程序,Backbone.history.start()是必须的。  
    }  
};


调用,完事啦。。。

App.initialize();


其实我只知道了这么点皮毛,接下来就要在实践中多去学习了,期待有后续。。。
给自己加个油,提个醒!
PS 接下来,我将试着在 doulaipk.com 去实践,求PHP程序猿.

发表评论

评论