前端mvc框架backbone.js入门
关于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入门[转]
原文地址:http://www.cnblogs.com/zhjh256/p/6083618.html 关于backbone.js的优缺点,这里就不详谈了,网上关于这方面的讨论很多了,而且各种框架之所以 ...
- 最轻量级的前端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中组件引入样式的方式也 ...
随机推荐
- java基础-复制
package hanqi.test; import java.io.FileInputStream; import java.io.FileOutputStream; public class Te ...
- gulp学习笔记4
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 之前的任务都是单个的,比较简单.接下去我们开始引用多个插件,一次性把任务搞定,省 ...
- Struts2 DomainModel、ModelDriven接收参数
一.DomainModel(域模型) 1. 应用场景:一般我们在struts2的action中接收参数通常是如下方式 package cn.orlion.user; import com.opensy ...
- 记录asp.net在IE10下事件丢失排错经过
最近项目中运用了地区三级联动,用的是最普通的DropDownList回发来实现的,如下图 一直用着都挺好的,可最近客户最近新换了台服务器,我把网站迁移过去就有了问题,三级联动失效了. 首先申明一点,这 ...
- linux安装nginx
nginx启动.重启.关闭 安装: http://www.cnblogs.com/skynet/p/4146083.html 一.启动 cd usr/local/nginx/sbin ./nginx ...
- PHP内核的学习--PHP生命周期
一切的开始: SAPI接口 SAPI(Server Application Programming Interface)指的是PHP具体应用的编程接口, 就像PC一样,无论安装哪些操作系统,只要满足了 ...
- CNN笔记
Deep Learning是全部深度学习算法的总称,CNN是深度学习算法在图像处理领域的一个应用. 转 http://blog.csdn.net/stdcoutzyx/article/details/ ...
- 浏览器退出之后php还会继续执行么？
浏览器退出之后php还会继续执行么? 前提:这里说的是典型的lnmp结构,nginx+php-fpm的模式 如果我有个php程序执行地非常慢,甚至于在代码中sleep(),然后浏览器连接上服务的时候, ...
- postgres中几个复杂的sql语句
postgres中几个复杂的sql语句 需求一 需要获取一个问题列表,这个问题列表的排序方式是分为两个部分,第一部分是一个已有的数组[0,579489,579482,579453,561983,561 ...
- 问题：Virtual Box如何复制镜像
今天遇到的情况就是vagrant启动的默认Virtalbox镜像变了,大致可以处理的方法是 1 修改vagrant的默认virtalbox 2 重新在这个新的virtualbox中安装需要的软件 3 ...