backbone入门

最新推荐文章于 2018-05-08 23:53:26 发布
最新推荐文章于 2018-05-08 23:53:26 发布
阅读量597 收藏
点赞数
分类专栏： javascript miaov

demo1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-2.0.3.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script>

//var model = new Backbone.Model();
//
//var models = new Backbone.Collection();
//
//var view = new Backbone.View();






//var model = new Backbone.Model();
//
//model.set('name','hello');
//
//alert( model.get('name') );







var model_1 = new Backbone.Model({'name':'hello'});
var model_2 = new Backbone.Model({'name':'hi'});

var models = new Backbone.Collection();
models.add( model_1 );
models.add( model_2 );

alert( JSON.stringify(models) );

</script>
</head>

<body>
</body>
</html>

demo2.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-2.0.3.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script>

//var M = Backbone.Model.extend({
//	aaa : function(){  //实例方法
//		alert(123);
//	}
//},{
//	bbb : function(){  //静态方法
//		alert(456);
//	}
//});
//
//var model = new M;
//model.aaa();
//M.bbb();







//var M = Backbone.Model.extend({
//	defaults : {
//		name : 'hello'
//	}
//});
//
//var model = new M;
//alert( model.get('name') );







var M = Backbone.Model.extend({
	aaa : function(){
		alert(123);
	}
});

var ChildM = M.extend();

var model = new ChildM;
model.aaa();

</script>
</head>

<body>
</body>
</html>

demo3.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-2.0.3.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script>

//var M = Backbone.Model.extend({
//	defaults : {
//		name : 'hello'
//	},
//	initialize : function(){  //初始化构造函数
//		
//		this.on('change',function(){
//			alert(123);
//		});
//		
//	}
//});
//
//var model = new M;
//model.set('name','hi');







//var M = Backbone.Model.extend({
//	defaults : {
//		name : 'hello'
//	},
//	initialize : function(){  //初始化构造函数
//		
//		this.on('change:name',function(model){
//			
//			console.log(model);
//			
//		});
//		
//	}
//});
//
//var model = new M;
//model.set('name','hi');







$(function(){

	var M = Backbone.Model.extend({
		defaults : {
			name : 'hello'
		}
	});
	
	var V = Backbone.View.extend({
			
		initialize : function(){
			
			this.listenTo( this.model , 'change' , this.show );
			
		},
		show : function(model){
			$('body').append( '<div>'+ model.get('name') +'</div>' );
		}
		
	});
	
	
	var m = new M;
	var v = new V({model:m});
	m.set('name','hi');

});








//var model = new Backbone.Model();
//
//var C = Backbone.Collection.extend({
//	initialize : function(){
//
//		this.on('add',function(){
//			alert(123);
//		});
//		
//	}
//});
//
//var models = new C;
//models.add( model );

</script>
</head>

<body>
</body>
</html>

demo4.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-2.0.3.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script>

//Backbone.sync = function(method, model) {
//	  alert(method + ": " + JSON.stringify(model));
//	  model.id = 1;
//};
//
//var M = Backbone.Model.extend({
//	defaults : {
//		name : 'hello'
//	},
//	url : '/user'
//});
//
//var m = new M;
//m.save();
//m.save({name : 'hi'});









Backbone.sync = function(method, model) {
	  alert(method + ": " + JSON.stringify(model));
};

var C = Backbone.Collection.extend({
	initialize : function(){
		this.on('reset',function(){
			alert(123);
		});
	}, 
	url: '/users'
});

var models = new C;
models.fetch();

</script>
</head>

<body>
</body>
</html>

demo5.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-2.0.3.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script>

var Workspace = Backbone.Router.extend({

	routes: {
		"help":                 "help",    // #help
		"search/:query":        "search",  // #search/kiwis
		"search/:query/p:page": "search"   // #search/kiwis/p7
	},
	
	help: function() {
		alert(1);
	},
	
	search: function(query, page) {
		alert(2);
	}

});

var w = new Workspace;
Backbone.history.start();

</script>
</head>

<body>
</body>
</html>

demo6.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-2.0.3.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script>

$(function(){
	
	var V = Backbone.View.extend({
		
		el : $('body'),
		events : {
			'click input' : 'aaa',
			'mouseover li' : 'bbb'
		},
		aaa : function(){
			alert(123);
		},
		bbb : function(){
			alert(456);
		}
		
	});
	
	var veiw = new V;
	
});

</script>
</head>

<body>
<input type="button" value="1" />
<ul>
	<li>11111</li>
    <li>11111</li>
    <li>11111</li>
    <li>11111</li>
</ul>
</body>
</html>

demo7.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-2.0.3.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script>

//$(function(){
//
//	var M = Backbone.Model.extend({
//		defaults : {
//			name : 'hello'
//		}
//	});
//	
//	var V = Backbone.View.extend({
//			
//		initialize : function(){
//			
//			this.listenTo( this.model , 'change' , this.show );
//			
//		},
//		show : function(model){
//			$('body').append( '<div>'+ model.get('name') +'</div>' );
//		}
//		
//	});
//	
//	
//	var m = new M;
//	var v = new V({model:m});
//	m.set('name','hi');
//
//});









$(function(){

	var M = Backbone.Model.extend({
		defaults : {
			name : 'hello'
		}
	});
	
	var V = Backbone.View.extend({
			
		initialize : function(){
			
			this.listenTo( this.model , 'change' , this.show );
			
		},
		show : function(model){
			$('body').append( this.template(this.model.toJSON()) );
		},
		template: _.template($('#template').html())
		
	});
	
	
	var m = new M;
	var v = new V({model:m});
	m.set('name','hi');

});

</script>
</head>

<body>

<!--<script type="text/template" id="template">
	
	<div><%= name %></div>
	
</script>-->




<script type="text/template" id="template">
	<% for (var i=0;i<5;i++) { %>
		<div><%= name %></div>
	<% } %>
</script>
</body>
</html>


montaellis
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
backbone 入门指南
05-15
### Backbone.js入门指南知识点概述 #### 一、为什么需要Backbone.js？ Backbone.js是一个轻量级的JavaScript库，它提供了MVC（Model-View-Controller）架构模式的基础实现，帮助开发者更好地组织复杂的Web应用...
BACKBONE.JS 简单入门范例
10-19
Backbone简单、灵活，无论是富JS应用还是企业网站都用得上，相比React针对View和单向数据流的设计，Backbone更能体现MVC的思路，所以针对它写一篇入门范例,需要的朋友可以参考下
Backbone入门讲解
weixin_34318272的博客
01-07 423
Backbone是一个实现了web前端mvc模式的js框架。 一种解决问题的通用方法，我们叫做模式。 设计模式：工厂模式，适配器模式，观察者模式等，推荐js设计模式这本书。设计模式是一种思想。 框架模式：MVC，MVP，MVVM等。框架模式是开发项目的一种方案。 MVC指的是什么？M：model（模型），V：view（视图），C：controller（控制器） MVC模式的思想，把模型和...
Backbone入门——开发第一个Backbone页面
weixin_33991418的博客
05-05 362
1. 功能描述在新建的html页面中，通过导入的backbone文件搭建一个简单的mvc结构。当用户进入该页时，id号为“divTip”的&lt;div&gt;元素中将显示“hello,backbone!”字样。 2. 实现代码 &lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;%...
Backbone入门
wanzhitao18的博客
12-14 249
https://my.oschina.net/bairrfhoinn/blog/66293#viewSource
Backbone入门指南（一）：什么是Backbone?
yujianshenbing的专栏
12-15 3213
1. 前言 　　本文的目的，是帮助大家快速理解掌握Backbone的使用，但它并不是API，因此我不会将每一个方法都详细地描述，但是我会告诉你如何学习它们。 　　这是一篇稍稍较长的技术文章，因为我想将我所了解的东西尽可能详细地分享给大家。但它还不至于出版为一本书籍，因为Backbone其实非常简单。当然，这并不表示Backbone提供的功能有限，相反，它能用简单的实现构建出复杂的应用，这正是...
[转]Backbone.js简单入门范例
weixin_34032827的博客
03-11 319
本文转自：http://dmyz.org/archives/598 11年刚开始用前端MVC框架时写过一篇文章，当时Knockout和Backbone都在用，但之后的项目全是在用Backbone，主要因为它简单、灵活，无论是富JS应用还是企业网站都用得上。写这篇文章的动机，是最近跟做在线教育的朋友聊，谈到比较好的中文入门教程不多，于是想针对自己用得最多的框架写一篇，说明如下： 1. 结构上...
backbone入门指南
zt_pursue的博客
05-08 197
Backbone入门指南
Backbone素材资料
12-06
首先，`Backbone入门基础.mmap`可能是MindMap或类似的学习工具创建的文件，它可能包含了Backbone.js的基本概念、架构和关键组件的概览。这可能包括： 1. **Model**：Backbone中的核心数据模型，用于存储和管理应用...
JavaScript的Backbone.js框架入门学习指引
10-22
主要介绍了JavaScript的Backbone.js框架入门学习指引, 其中特别讲到了Backbone中的关键部分Router路由器,需要的朋友可以参考下
Backbone入门基础 - Model与服务器交互
Joyce的前端日常
09-02 2037
介绍Model与服务器交互的方法
Backbone入门基础 - 集合
Joyce的前端日常
09-07 1522
集合基本用法、事件以及与服务器交互
基于卷积神经网络的语音识别声学模型的研究
08-04
【项目资源】：包含前端、后端、移动开发、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源，毕业设计等各种技术项目的源码。包括C++、Java、python、web、C#、EDA等项目的源码。 【适用人群】：适用于希望学习不同技术领域的初学者或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。
VCD租借管理系统VB（源程序+论文）.rar
08-04
VCD租借管理系统VB（源程序+论文）
嗖嗖移动大厅（Java）
08-04
嗖嗖移动大厅源码
android-studio-2022.3.1.22-windows.zip.001
最新发布
08-04
android-studio-2022.3.1.22-windows.zip.001 参考文档： https://blog.csdn.net/xzzteach/article/details/140911515 android-studio-2022.3.1.22-windows.zip.001 https://download.csdn.net/download/xzzteach/89614079 android-studio-2022.3.1.22-windows.zip.002 https://download.csdn.net/download/xzzteach/89614082 https://blog.csdn.net/xzzteach/article/details/140913786 【Android Studio】2022.3.1.22-windows版本（不要太新拒绝过老）安装使用一条龙教程（JDK1.8.0_201、API28(9)、gradle-6.5-all）
[毕业设计]VB+ACCESS大型机房学生上机管理系统设计与实现(源代码+论文).zip
08-04
[毕业设计]VB+ACCESS大型机房学生上机管理系统设计与实现(源代码+论文)
面包旅行.rar
08-04
小程序的设计源码通常包含多个文件和文件夹，组织结构清晰，以便开发者能够快速上手并进行定制化开发。主要文件和文件夹包括： 页面文件夹：存放小程序的各个页面，每个页面通常由.wxml、.wxss、.js和.json文件组成。WXML文件负责页面的结构，类似于HTML；WXSS文件负责样式，类似于CSS；JS文件负责页面的逻辑和交互；JSON文件用于页面的配置，如导航栏标题等。 组件文件夹：存放可复用的UI组件。组件与页面类似，也由.wxml、.wxss、.js和.json文件组成。通过组件化设计，可以提高代码的复用性和维护性，减少重复工作。 静态资源文件夹：存放图片、音频、视频等静态资源，便于在小程序中引用。这些资源通常放在一个名为assets或static的文件夹中。 配置文件：小程序的根目录下通常有一个app.json文件，用于全局配置，如页面路径、导航栏样式、底部Tab栏等。此外，还有app.wxss和app.js文件，分别用于全局样式和全局逻辑。 工具文件夹：存放一些工具函数和库文件，便于在小程序中调用。这些文件通常放在一个名为utils的文件夹中。
Backbone入门：模块化、视图与模型详解
Backbone.js入门指南是一份面向初学者、中级和高级开发者编写的教程，由Thomas Davis创作，于2012年4月28日发布。该书通过Leanpub平台销售，旨在介绍如何利用Backbone.js这一强大的JavaScript框架来构建高效、模块化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值