前端mvc框架backbone.js入门[转]
原文地址：http://www.cnblogs.com/zhjh256/p/6083618.html
关于backbone.js的优缺点，这里就不详谈了，网上关于这方面的讨论很多了，而且各种框架之所以长久生存，通常都是有其特定优势和擅长点的。
使用backbone.js作为前端框架的应用通常都是html和javascript分离的，也可参考requirejs的结构。
本文介绍backbone.js的入门教程，通过本篇，读者应该能够比官方API更快和更好的理解基于backbone.js的应用。
首先，定义一个html宿主页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>backbone js test</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jsrender.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript" src="backbone_getting_start.js"></script>
</head>
<body>
<a href="#!/hello">测试route</a>
<div id="result"></div>
<script type="text/x-jsrender" id="hello-container-template">
<h3>{{:name}},{{:message}}</h3>
<div id="btnClick">测试backbone单击事件</div>
</script>
</body>
</html>
其次，在专门的backbone_getting_start.js文件中定义MVC结构，如下：
/**
* Created by dell on 2016/11/20.
*/
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({
urlRoot: function() {
return '/webend/api.json'; // 获得数据的后台地址，可以是函数或者属性, 随意定义一个api.json即可，见下文
},
initialize: function() {
this.set({'message':'hello world'}); // 前端定义一个message字段，name字段由后端提供, 后台如果包含同样字段，会自动覆盖，否则合并。
}
});
App.Views.Hello = Backbone.View.extend({
el: "#result", //定义结果view的容器，只要DOM元素（# . element）都可以，一般使用class或者id
template: function() {
return $.templates("#hello-container-template"); // 返回template，需要是函数
},
events: {
"click #btnClick": "btnClick" // 定义this.el内DOM的事件
},
initialize: function(options){
this.options = options;
this.bind('change', this.render);
this.model = this.options.model;
},
render: function(){ // render方法，目标只有两个：填充this.$el，返回this以便链式操作。如果是this.el，则需要el.innerHtml
this.$el.html(this.template().render(this.model));
return this;
},
btnClick: function() {
alert("测试backbone js events功能！");
}
});
App.Controllers.Routes = Backbone.Router.extend({ //早期的版本使用Controller,当前版本已经去掉了Controller
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.toJSON()}); //model需要调用toJSON，否则返回值放置在model.attribute
helloView.trigger('change');
}
})
}});
App.initialize();
定义后台服务，以返回json的静态文件为例：
{"name":"from backend restful api","message":"return from restful api too"}
打开backbone_getting_start.html
点击上述链接，如下：
点击"测试backbone单击事件"，如下：
前端mvc框架backbone.js入门[转]的更多相关文章
- 前端mvc框架backbone.js入门
关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以长久生存,通常都是有其特定优势和擅长点的. 使用backbone.js作为前端框架的应用通常都是htm ...
- 最轻量级的前端Mvc框架backbone
最轻量级的前端Mvc框架backbone依赖最轻量级的库understore backbone并非将前端再次切分为mvc,而是分为了七大模块,分别是:Events.Model.Collection.R ...
- 前端MVC框架Backbone 1.1.0源码分析(一)
前言 如何定义库与框架 前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能 ...
- 前端MVC框架Backbone 1.1.0源码分析系列
Backbone.js 是一个在JavaScript环境下的 模型-视图-控制器 (MVC) 框架.任何接触较大规模项目的开发人员一定会苦恼于各种琐碎的事件回调逻辑.以及金字塔般的代码.而且,在传统的 ...
- 前端MVC框架Backbone 1.1.0源码分析(二) - 模型
模型是什么? Models are the heart of any JavaScript application, containing the interactive data as well a ...
- Web前端MVC框架的意义分析
前言: Web前端开发是Web技术发展中的一个重要组成部分,在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点,即以页面为主体来展示界面中的信息.然而随着科学技术的不断进步,Web前 ...
- .NET轻量级MVC框架：Nancy入门教程(二)——Nancy和MVC的简单对比
在上一篇的.NET轻量级MVC框架:Nancy入门教程(一)——初识Nancy中,简单介绍了Nancy,并写了一个Hello,world.看到大家的评论,都在问Nancy的优势在哪里?和微软的MVC比 ...
- 前端测试框架对比(js单元测试框架对比)
前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试(Function ...
- Web前端三大框架_angular.js 6.0（二）
Web前端三大框架_angular.js 6.0(一) 需要视频教程,看头像昵称处 一.Angular 6.0 1.1样式 html中引入样式:内嵌式,外链式,行内式. ng6中组件引入样式的方式也 ...
随机推荐
- Android Saving Data(一)
Saving Key-value Sets 保存键值对 SharedPreferences只能用来保存一些简单的数据,并且这些数据可以是共享的,也可以是私有的. SharedPreferences没 ...
- 实现DevExpress GridControl 只有鼠标双击后才进行修改数据
1. 实现DevExpress GridControl 只有鼠标双击后才进行修改数据:修改GridView.OptionsBehavior.EditorShowMode属性为Click 2. 实现De ...
- 副本限制修改-M端
魔兽的副本很多,也有很多副本都有进入的限制,比方说最普遍的,有些副本有级别限制,没达到要求的级别是不能进入对应副本的还有些副本是有任务需求限制,比方说黑翼副本,需要做完一个任务之后才可以进入副本当然, ...
- .Net WebApi 实现OAuth2.0认证
现在多数公众平台提供的api都使用OAuth2.0认证模式,最近在搞Android方面的开发,身份认证和权限控制的各方面比较来说,使用OAuth认证的还是比较靠谱,OAuth2.0的协议可以参考htt ...
- Python之路，day9-Python基础
回顾:抽象方法@staticmethod 不能访问类的任何属性@classmethod 类方法 只能访问公有属性@property 属性方法 , 把一个方法变成一个静态属性def sayhi() pa ...
- 远程调试js注意事项
1:使用host切换工具,先注释掉93服务器的地址,打开链接,点击高级选项,进去后登陆账号密码(如果不行重启浏览器): 2:进入后,增加93服务器上的host地址,重启浏览器,css样式生效: 3:使 ...
- AT指令获取基站信息
AT+CREG 网络注册和漫游 命令发送(command): AT+CREG=<mode> 命令响应(Response): +CREG :<mode&g ...
- An invalid character [32] was present in the Cookie value
系统安装Tomcat版本为:tomcat8,登录时报错"An invalid character [32] was present in the Cookie value" 处理方 ...
- MyBatis入门学习教程-MyBatis缓存
一.MyBatis缓存介绍 正如大多数持久层框架一样,MyBatis 同样提供了 package me.gacl.test; 2 import me.gacl.domain.User; import ...
- day26：面向对象进阶：set、get、del反射和内置
三 __setattr__,__delattr__,__getattr__ __开头的都是内置的,不定义系统都会有.如果自己定义的话,就会覆盖系统内置的,执行自定义的部分(是否有完成设置的语法,有的话 ...