前端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中组件引入样式的方式也 ...
随机推荐
- 关于javascript中闭包的理解
闭包就是能够读取其他函数内部变量的函数. 在javascript中,只有函数内部的子函数可以读取局部变量,因此,我理解闭包就是定义在一个函数内部的函数. 例子: var f1 = function() ...
- 【java规则引擎】之Drools之Rete算法
一:规则引擎--->规则引擎的核心是Pattern Matcher(模式匹配器).不管是正向推理还是反向推理,首先要解决一个模式匹配的问题.--->对于规则的模式匹配,可以定义为: 一个规 ...
- 路由 - ASP.NET MVC 4 系列
软件开发人员常常对一些细小的细节问题倍加关注,由其在考虑源代码的质量和结构时更是如此.因此,当遇到大部分使用 ASP.NET 技术构建的站点,使用如下的 URL 地址时,可能会有些奇怪: ...
- 远程监控显示brother数控机床数据
最近几个月公司太忙了,到现在已经连续出差两个多月了. 这个项目这要做mes系统,涉及到产品在机床的加工过程监控,然后led看板显示产品进度. 这里的主角是日本的brother数控机床,服务器按照一定频 ...
- AngularJS中的Provider们：Service和Factory等的区别
引言 看了很多文章可能还是不太说得出AngularJS中的几个创建供应商(provider)的方法(factory(),service(),provider())到底有啥区别,啥时候该用啥,之前一直傻 ...
- CSS 后代选择器
后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...
- email 正则
^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-]+((\.|-)[A-Za-z0-]+)*\.[A-Za-z0-]+$
- 循环语句--while
有一种循环叫死循环,一经触发,就运行个天荒地老.海枯石烂 #coding=utf-8 count=0 while True: print("你是风儿我是沙,缠缠绵绵到天涯...", ...
- linux新增用户并增加sudo权限
创建用户.设置密码: useradd testuser 创建用户testuserpasswd testuser 给已创建的用户testuser设置密码 增加sudo权限: #vi /etc/sudoe ...
- Maven私有仓库搭建和使用
下载和安装 下载地址: http://www.sonatype.com/nexus-repository-oss 安装: Linux版的无需安装,直接解压即可,然后进入bin目录下,运行./nexus ...