来自一个Backbone的Hello,World!
2016-01-30 12:07
513 查看
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();
相关文章推荐
- 为Ubuntu Gnome环境创建桌面快捷方式
- c语言实现一个简单的通用动态数组
- eclipse搭建erlang开发环境
- canvas线条笔帽及连接
- Linux系统中Squid代理服务器配置全过程解析
- 多线程的实现方式及经典示例
- Java开发中的23种设计模式详解(转)
- 对象管理器 3种方法实现 struct、 vector、map
- Linux下服务器端使用EPOLL ACCEPT产生的问题
- iOS 字符属性NSAttributedString描述
- C#基础之转义符
- C++获得文件夹下所有文件的路径及文件名
- NSLog不打印设置
- Linux MBR分区(重点知识)
- cf#22-B-Bargaining Table-枚举+贪心+dp(最大连续区间和)
- C++实用技巧排序算法
- MySQL备份
- 将下载的图片加入media检索库
- uva 1434 - YAPTCHA(数论)
- 计算 webView 显示内容后实际高度