前端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中组件引入样式的方式也 ...
随机推荐
- org.springframework.jdbc.CannotGetJdbcConnectionException: Could not get JDBC Connection 原因
org.springframework.jdbc.CannotGetJdbcConnectionException: Could not get JDBC Connection 可能出现的原因 ...
- 在MyEclipse和Eclipse中添加Hibernate开发工具
一.插件准备 MyEclipse需要的插件:HibernateTools-3.2.4.zip Eclipse需要的插件:jbosstools-4.2.3.Final_2015-03-26_22-41- ...
- Digital root（数根）
关于digital root可以参考维基百科,这里给出基本定义和性质. 一.定义 数字根(Digital Root)就是把一个数的各位数字相加,再将所得数的各位数字相加,直到所得数为一位数字为止.而这 ...
- Qt自定义事件的实现（转）
原文:http://blog.csdn.net/michealtx/article/details/6866094 初学Qt,用了Qt自带的事件,然后想怎么才能定义自己的事件呢?又如何使用自定义事件呢 ...
- Java中避免表单重复提交
表单的重复提交: 没有完整的进行一次,先请求表单页面->再提交表单过程而完成数据提交 造成的根本原因: 没有完整的进行一次,先请求表单页面->再提交表单过程. 造成重复提交的现象: 由于服 ...
- (译) Conditional Variational Autoencoders 条件式变换自编码机
Conditional Variational Autoencoders --- 条件式变换自编码机 Goal of a Variational Autoencoder: 一个 VAE(variati ...
- ios 写项目的时候遇到的问题及解决方案(2)
11.自适应文本高度 NSDictionary *attributes = @{NSFontAttributeName: [UIFont systemFontOfSize:]}; CGRect rec ...
- Calendar
/* * Calendar:它为特定瞬间与一组诸如 YEAR.MONTH.DAY_OF_MONTH.HOUR 等 日历字段之间的转换提供了一些方法,并为操作日历字段(例如获得下星期的日期)提供了一些方 ...
- MVC4 +EasyUI Tabs 使用
Tabs 右键菜单功能实现 前端 <div id="tabs" class="easyui-tabs" fit="true" bord ...
- 说说Web.Config与App.Config
说到web.config和app.config大家都很熟悉,我们都叫他们配置文件,平时用的多,注意的少.两个有啥区别呢,很简单,一句话:如果是web程序,如webform项目类型和mvc项目类型就是w ...