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();

来自一个Backbone的Hello,World!的更多相关文章

  1. Backbone入门——开发第一个Backbone页面

    1. 功能描述在新建的html页面中,通过导入的backbone文件搭建一个简单的mvc结构.当用户进入该页时,id号为“divTip”的<div>元素中将显示“hello,backbon ...

  2. 【架构】生成全局唯一ID的3个思路,来自一个资深架构师的总结

    标识(ID / Identifier)是无处不在的,生成标识的主体是人,那么它就是一个命名过程,如果是计算机,那么它就是一个生成过程.如何保证分布式系统下,并行生成标识的唯一与标识的命名空间有着密不可 ...

  3. 第一次作业:来自一个奋斗的IT学子

    第一部分 结缘计算机 1.1你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢?(必答) 说起为何结缘了计算机,就得谈谈专业报考了,我觉得我的报考真是一个反面教科书了.由于高中以前每天只要想着 ...

  4. 来自一个电子狂的stm32学习历程

    文章尾部有学习时的一些视频资料在学的可以看看那么我们就进入今天的主题我stm32的学习历程 在学习了51单片机之后,早已经对单片机这个东西甚有了解了,所有不管是从内部资源,还是一些常见应用,都可以说的 ...

  5. vue-cli@3.x之使用vue ui创建项目-来自一个战五渣的体验

    1. 全局安装vue-cli yarn global add @vue/cli // 检查安装是否成功 vue -V // 3.2.2 2. 初始化 vue ui 执行命令 vue ui 2.1 该命 ...

  6. Python: 为对象动态添加函数,且函数定义来自一个str

    转自:http://blog.sina.com.cn/s/blog_55a11f330100ab1x.html 在Python中,通常情况下,你只能为对象添加一个已经写好的方法 需求:传入一个str类 ...

  7. 来自一个用户的体验-Alpha项目测试

    软件梦之队成员:201731062305 周蓉 这个作业属于哪个课程 <课程的链接> 这个作业要求在哪里 <作业要求的链接> 团队名称 <软件梦之队>(附上团队博客 ...

  8. 来自一个大三开学三周的huster的迷茫与失措

    大三开学考研保研的话题开始多了起来.自从前天去听了一回谢长生教授的实验室宣讲会,回来直到现在都好像心头上压了些东西,喘不过气来.本来我就少与外界接触,加之我自己一个人主动学习的积极性也很是缺乏,所以当 ...

  9. backbone库学习-Router

    backbone库的结构http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html 本文的例子来自http://blog.csdn.n ...

随机推荐

  1. SQL之联合查询学习笔记

    定义: 联合查询可合并多个相似的选择查询的结果集.等同于将一个表追加到另一个表,从而实现将两个表的查询组合到一起,使用谓词为UNION或UNION ALL. 语法格式 UNION 可以将两个或两个以上 ...

  2. java中注解的使用与实例

    1.spring中的一段代码: @Target(ElementType.PARAMETER)@Retention(RetentionPolicy.RUNTIME)@Documentedpublic @ ...

  3. 【最简单】不用ps也可以批量转换图片格式

    不废话直接开始~ 1.新建文件夹,把需要转换的图片放进去,如图: 2.文件夹里建一txt文本,重点来了!txt文本的内容,如果是jpg转为png,则输入“ren *.jpg *.png”,同理png转 ...

  4. android获取view宽高的几种方法

    在onCreate方法中我们通过mView.getWidth()和mView.getHeight()获取到的view的宽高都是0,那么下面几种方法就可以在onCreate方法中获取到view的宽高. ...

  5. Gartner 2018 年WAF魔力象限报告:云WAF持续增长,Bot管理与API安全拥有未来

    Gartner 2018 年WAF魔力象限报告:云WAF持续增长,Bot管理与API安全拥有未来 来源 https://www.freebuf.com/articles/paper/184903.ht ...

  6. 【NOI 2018】归程(Kruskal重构树)

    题面在这里就不放了. 同步赛在做这个题的时候,心里有点纠结,很容易想到离线的做法,将边和询问一起按水位线排序,模拟水位下降,维护当前的各个联通块中距离$1$最近的距离,每次遇到询问时输出所在联通块的信 ...

  7. POJ.3321 Apple Tree ( DFS序 线段树 单点更新 区间求和)

    POJ.3321 Apple Tree ( DFS序 线段树 单点更新 区间求和) 题意分析 卡卡屋前有一株苹果树,每年秋天,树上长了许多苹果.卡卡很喜欢苹果.树上有N个节点,卡卡给他们编号1到N,根 ...

  8. 配置nginx为FastDFS的storage server提供http访问接口

    1.拉取模块代码 # git clone https://github.com/happyfish100/fastdfs-nginx-module.git 2.编译安装nginx,添加支持fastdf ...

  9. Java EE之通过表单上传文件

    public class Ticket { private String customerName; private String subject; private String body; priv ...

  10. 调用Android系统设置项

    Intent mIntent = new Intent(); ComponentName comp = new ComponentName("com.android.settings&quo ...