`
zccst
  • 浏览: 3315665 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

backbone初步(秒味课堂)

阅读更多
作者:zccst

作为一个大型程序框架,backbone的思路是很好的
下面就好好学习一下

基本使用:
1,直接创建对象
2,给构造函数添加实例方法和静态方法
3,继承操作
4,自定义事件
5,数据与服务器
6,路由与历史管理
7,事件委托
8,前端模板


举例:
1,直接创建对象
var o = Backbone.Model();

2,给构造函数添加实例方法和静态方法

3,继承操作
A是一个Model,添加了aa方法
B是一个继承A的Model,则B的对象也有aa方法

4,自定义事件
var M = Backbone.Model.extend({
	default:{
		name:'hello'
	},
	//初始化构造函数
	initialize:function(){
		//表示model发生变化时触发
		/*this.on('change',function(){
			alert(123);
		});*/
		this.on("change:name",function(model){
			console.log(model);
		});
	}
});
var m = new M();
m.set("name","w1");
m.set("name","w2");
m.set("name","w3");


/**模型与视图相结合的例子*/
var M = Backbone.Model.extend({
	default:{
		name:'hello'
	}
});
var V = Backbone.View.extend({
	//初始化构造函数
	initialize:function(){
		//表示model发生变化时触发
		this.listenTo(model, 'change', show);
	},
	show :function(model){
		$("body").append("<div>"+model.get("name")+"</div>");
	}
});
var m = new M;
var v = new V({model:m});//model与view发生联系是将model对象传入view对象
m.set("name","ww");

5,数据与服务器
Backbone.sync = function(method_name, model, callback){
	console.log(method_name + JSON.stringify(model));
	model.id = 1;
};

var M = Backbone.Model.extend({
	default:{
		name:'hello'
	},
	url:"/user"
});

var m = new M;
m.save();//保存,调用validate,调用sync,第一次是create,第二次是update
m.save("name","ww");


还有Collection与服务器端调用(待续)


6,路由与历史管理
当在浏览器输入不同的URL时,调用不同的方法
var R = Backbone.View.Route({
    routes : {    //路由映射
        'help' : help,
        'help/method': search,
    }
    help : function(){alert('a');},
    search : function(){alert('b');}
});
var r = new R;
history.start();

对于历史管理:就是在前进或后退时也会触发调用(因为URL发生了变化)



7,事件委托
var V = Backbone.View.extend({
    el:$("body"), //委托元素
    events : {    //委托事件
        'click input' : aaa,
        'mouseover li': bbb,
    }
    aaa : function(){alert('a');},
    bbb : function(){alert('b');}
});

<body>
<input />
<ul><li>1</li></ul>
</body>


8,前端模板


例子分析:TODOS




如果您觉得本文的内容对您的学习有所帮助,您可以微信:

分享到:
评论

相关推荐

    BackBone介绍及使用

    **BackBone介绍** Backbone.js 是一款轻量级的JavaScript框架,主要用来构建富客户端的Web应用。它强调数据模型的管理和视图的同步,帮助开发者以更有序的方式组织前端代码,提高开发效率。Backbone.js的核心设计...

    Java 演示 backbone 基本用法

    在IT行业中,Backbone.js是一个非常著名的JavaScript库,它主要用于构建客户端的Web应用程序。这个"Java演示Backbone基本用法"的主题,虽然标题中有"Java",但实际上Backbone.js是与JavaScript紧密相关的,而非Java...

    backbone 资料

    Backbone.js 是一个轻量级的JavaScript库,它为构建复杂的Web应用提供了模型-视图-控制器(MVC)架构。这个框架的核心理念是帮助开发者维护数据和界面之间的同步,同时提供了一种组织代码的方式,使得大型应用的管理...

    backbone整合require例子

    **标题解析:** "backbone整合require例子" 这个标题表明我们将讨论如何将Backbone.js框架与RequireJS模块加载器结合使用。Backbone.js是一个轻量级的JavaScript库,用于构建可维护的前端应用程序,而RequireJS则是...

    BACKBONE.JS应用程序开发

    backbone.js提供了一套web开发的框架,为复杂javascript应用程序提供一个mvc结构。, 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,...

    backbone文档

    Backbone.js 是一款轻量级的JavaScript库,主要用于构建客户端的Web应用程序,它引入了Model-View-Controller(MVC)的设计模式,帮助开发者更好地组织和管理前端代码。这款库由Jeremy Ashkenas开发,自2010年发布...

    Backbone 文档

    Backbone.js 是一款轻量级的JavaScript库,用于构建客户端的Web应用,它提供了一种组织和管理前端数据模型、视图以及与服务器交互的结构。这个文档将带你走进Backbone的世界,通过一个开发入门的例子,帮助你了解...

    backbone_api_frame

    Backbone_API_frame是一个基于Backbone.js和ExtJS开发的API框架,主要目的是为了提供一个高效、结构化的Web应用开发解决方案。这个框架结合了Backbone.js的模型-视图-控制器(MVC)架构和ExtJS的组件化能力,旨在...

    backbone官方Todo示例_修正

    Backbone.js是一个轻量级的JavaScript库,专为构建可维护和可扩展的单页应用程序(SPA)设计。它的核心理念是提供模型(Model)、视图(View)和集合(Collection)等概念,帮助开发者实现数据和界面的解耦,增强代码的组织...

    Backbone.js(1.1.2) API中文文档.zip Backbone.js离线文档

    Backbone.js是一款轻量级的JavaScript库,专为构建丰富的Web应用程序而设计。它通过提供模型(Models)、视图(Views)、集合(Collections)和路由器(Routers)等核心概念,帮助开发者组织代码并实现MVC(Model-...

    backbone教程

    Backbone教程 Backbone.js是一个轻量级的JavaScript框架,主要提供了三大组件:models(模型)、collections(集合)和views(视图)。通过这三个组件,可以快速构建复杂的Web应用程序。 Models(模型) Backbone...

    backbone 实例

    Backbone.js是一款轻量级的JavaScript库,专为构建可维护的前端应用设计。它引入了Model、View、Collection和Router等概念,帮助开发者在浏览器端实现MVC(Model-View-Controller)架构。让我们深入探讨一下Backbone...

    Backbone.js应用程序开发

    backbone.js提供了一套web开发的框架,为复杂javascript应用程序提供一个mvc结构。, 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,...

    backbone-boilerplate, 一组用于构建 backbone.js 应用程序的最佳实践和实用工具.zip

    backbone-boilerplate, 一组用于构建 backbone.js 应用程序的最佳实践和实用工具 Backbone 模板这个样板是许多研究和挫折的产物。 现有的boilerplates修改 Backbone 核心,没有构建过程,或者者是非常规范的,这样的...

    backbone_js_1.1.2

    Backbone.js是一款轻量级的JavaScript库,专为构建复杂前端应用而设计。它通过提供模型(Models)、视图(Views)、集合(Collections)和路由器(Routers)等核心概念,帮助开发者组织和管理Web应用的结构。1.1.2是...

    backbone 和bootstrap 登录示例项目

    **Backbone.js与Bootstrap简介** Backbone.js是一个轻量级的JavaScript库,它为Web应用程序提供了模型-视图-视图模型(MVC)架构。它主要关注数据模型的管理、视图的创建以及应用程序的结构组织。Backbone.js的核心...

    backbone官方实例

    Backbone.js是一款轻量级的JavaScript库,专为构建可维护的前端应用而设计。它提供了模型(Model)、视图(View)、集合(Collection)和路由器(Router)等核心概念,帮助开发者实现MVC(Model-View-Controller)架构。在这...

    backbone.js 1.1.2

    backbone.js 1.1.2

    backbone.js underscore.js

    Backbone.js 和 Underscore.js 是两个在JavaScript开发中广泛使用的库,它们为构建复杂的Web应用程序提供了强大的工具。这两个库都是基于jQuery库,其中jQuery-1.10.2.js是jQuery的一个版本,它为DOM操作、事件处理...

Global site tag (gtag.js) - Google Analytics