前端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中组件引入样式的方式也 ...
随机推荐
- pyside窗口关闭触发事件
窗口关闭事件本质上是重写了类内部的closeEvent方法,可以通过重写这个类去实现其他你想要的关闭事件. 下面的例子实现了一个简单的窗口,并为窗口添加了关闭时弹出提示框的功能. import sys ...
- IOS-指定返回Modal的控制器presentViewController
[self.presentingViewController.presentingViewController dismissViewControllerAnimated:NO completion: ...
- switch
关于java中switch使用的一些说明 switch(表达式) { case常量表达式1:语句1; .... case常量表达式2:语句2; default:语句; } default就是如果没有符 ...
- windows下IIS+PHP解决大文件上传500错问题
linux下改到iis+php后,上传大于2M就出500错,改了php.ini中的upload_max_filesize也不行,最后解决如下: 第一步:修改php.ini 上传大小限制 (以上传500 ...
- 使用spring连接及操作mongodb3.0
前边有一篇记录过不使用spring,直接在java代码中连接和操作mongodb数据库,这里就紧随其后记录一下使用spring的情况下,在java中简单操作mongodb. maven导包配置: ...
- java基础-servlet-1
servlet,是运行于服务器端的小程序.它既可以运行在http服务器端,也可以运行在mail等其他服务器端.我是这样理解,tomcat把接收到的客户端请求,转发给servlet,它负责业务处理,并且 ...
- Hololens开发笔记之Gesture手势识别（Manipulation手势控制物体平移）
Manipulation gesture:保持点击手势,在3D世界中绝对运动 当你想要全息图像1:1响应用户手部移动时,操纵手势能被用于移动.缩放或旋转全息图像.如此的一个用处是使得用户可以在世界中绘 ...
- C# 抽象类abstract
不能初始化的类被叫做抽象类,它们只提供部分实现,但是另一个类可以继承它并且能创建它们的实例,有未被实现的方法.抽象类不可以new对象. "一个包含一个或多个纯虚函数的类叫抽象类,抽象类不能被 ...
- maven详解之生命周期与插件
Maven是一个优秀的项目管理工具,它能够帮你管理编译.报告.文档等. Maven的生命周期: maven的生命周期是抽象的,它本身并不做任何的工作.实际的工作都交由"插件"来完成 ...
- 让一个端口同时做两件事：http/https和ssh
相信很多人都在YY:能不能让80端口分析连接协议,如果是http协议就让服务器交给http服务程序(如Apache.Nginx等)处理,如果是ssh协议就交给ssh服务程序(如OpenSSH Serv ...