`

Backbone快速入门-了解的4个关键概念

 
阅读更多

Backbone快速入门-了解的4个关键概念

 

4个关键概念, model, collection, view, router：

  • 1. model

       定义model类，举例： 
World = Backbone.Model.extend({
		//创建一个World的对象，拥有name属性
		name: null
});

  • 2. collection

          定义model collection类, 举例： 
Worlds = Backbone.Collection.extend({
                //集合对象构造函数
		initialize: function (models, options) {
			//**Key point 1**: 绑定view的addOneWorld方法到当前worlds集合对象的add动作
			//Purpose：当model数据变化时，触发view中的方法，从而可以更新View
			this.bind("add", options.view.addOneWorld);
		}
});

  • 3. view

  •  定义View类，举例:

        

	AppView = Backbone.View.extend({
		el: $("body"),
		
        //构造函数
		initialize: function () {
			//* 绑定Model，实例化一个Model集合类，并且以字典方式传入AppView的对象
			this.worlds = new Worlds(null, { view : this });

			//* 初始化渲染
			this.render();
		},

        //* 加载模板
		render:function(){
			//使用underscore这个库，来编译模板 
			
			//***Key Point 3: 从当前页面加载模板
			var template1=_.template($("#area1_template").html(),{hello:"Hello! You are welcome! "});
			//加载模板到对应的el属性中
			$("#area1").html(template1);

			//从外部文件加载模板
			//var template2=_.template($("#area2_template").html(),{footer:"Footer text~~~~"}); 
			//$("#area2").html(template2);
		},

		//* 事件绑定
		events: {
			//***Key Point 2: 绑定Dom中id为check的元素
			//Purpose：事件对应到代码处理，更新model数据, 从而联系到Key point 1
			"click #check": "checkIn",
		},
		
        //* 业务处理 (处理Model数据)
		checkIn: function () {
			var world_name = prompt("请问，您是哪星人?");
			if(world_name == "")
				world_name = '未知';

			var world = new World({ name: world_name });
			this.worlds.add(world);
		},

		//* View更新
		addOneWorld: function(model) {
			$("#world-list").append("<li>这里是来自<b>" + model.get('name') + "</b>星球的问候：hello world!</li>");
		}
	});

	//实例化AppView
	var appview = new AppView();

 

        注: 在View类中一般处理以下事情：

             1)  绑定Model (数据)

             2)  绑定Model

             3)  加载模板

             4)  事件绑定

             5)  业务处理 (处理Model数据)

             6)  View更新

             7）页面数据的变化同步到服务器端？

  • 4. router

        Backbone中的router， 有路由的意思，控制相应url的action， 扮演一部分MVC中Controller的角色。Backbone.Router会把你连接中的#标签当做是url路径。

	// 3. 定义MVC中的Controller部分 *****
	var AppRouter=Backbone.Router.extend({
		routes:{
			'posts/:id' : 'getPost',  //对应的链接为<a href="#/posts/120">Post 120</a>
		    'download/*path':'downloadFile',//对应的链接为<a href="#/download/user/images/hey.gif">download gif</a>
		    ':route/:action':'loadView', //对应的链接为<a href="#/dashboard/graph">Load Route/Action View</a>
		    '*actions' : 'defaultRoute'
		},


		getPost : function(id){
			console.log('id=' + id);
			alert(id);
		},
		
		downloadFile : function(path){
			alert(path);	// user/images/hey.gif
		},

		loadView : function(route,action){
			alert(route+"_"+action);	// dashboard_graph
		},
		
		defaultRoute : function(actions){
		    alert("Default " + actions);
		}
	});
	//实例化AppRouter
	var app_router=new AppRouter;
	Backbone.history.start();

 

        

 

完整源代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Hill is struggling for his dream! </title>
</head>
<body>
<a href="#/posts/120">Post 120</a>
<a href="#/download/user/images/hey.gif">download gif</a>
<a href="#/dashboard/graph">Load Route/Action View</a>

<div id="area1"></div>
<div id="area2"></div>

<script type="text/template" id="area1_template">
	<label><%=hello%></label><br>

	<button id="check">报到</button>
	<ul id="world-list"></ul>
</script>
<!--<script src="template/area2_template.js"></script>-->
</body>

<script type="text/javascript" src="js/lib/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui-1.9.0.js"></script>
<script type="text/javascript" src="js/lib/underscore-min-1.3.3.js"></script>
<script type="text/javascript" src="js/lib/backbone-min-0.9.10.js"></script>

<script>
(function ($) {
	// 1. 定义MVC中的Mobel部分 *****
	World = Backbone.Model.extend({
		//创建一个World的对象，拥有name属性
		name: null
	});
	
	Worlds = Backbone.Collection.extend({
		//World对象的集合
		initialize: function (models, options) {
			//***Key Point 1: 绑定view的addOneWorld方法到当前worlds集合对象的add动作
			//Purpose：当model数据变化时，触发view中的方法，从而可以更新View
			this.bind("add", options.view.addOneWorld);
		}
	});

	// 2. 定义MVC中的View部分 *****
	AppView = Backbone.View.extend({
		el: $("body"),
		
        //构造函数
		initialize: function () {
			//* 绑定Model，实例化一个Model集合类，并且以字典方式传入AppView的对象
			this.worlds = new Worlds(null, { view : this });

			//* 初始化渲染
			this.render();
		},

        //* 加载模板
		render:function(){
			//使用underscore这个库，来编译模板 
			
			//***Key Point 3: 从当前页面加载模板
			var template1=_.template($("#area1_template").html(),{hello:"Hello! You are welcome! "});
			//加载模板到对应的el属性中
			$("#area1").html(template1);

			//从外部文件加载模板
			//var template2=_.template($("#area2_template").html(),{footer:"Footer text~~~~"}); 
			//$("#area2").html(template2);
		},

		//* 事件绑定
		events: {
			//***Key Point 2: 绑定Dom中id为check的元素
			//Purpose：事件对应到代码处理，更新model数据, 从而联系到Key point 1
			"click #check": "checkIn",
		},
		
        //* 业务处理 (处理Model数据)
		checkIn: function () {
			var world_name = prompt("请问，您是哪星人?");
			if(world_name == "")
				world_name = '未知';

			var world = new World({ name: world_name });
			this.worlds.add(world);
		},

		//* View更新
		addOneWorld: function(model) {
			$("#world-list").append("<li>这里是来自<b>" + model.get('name') + "</b>星球的问候：hello world!</li>");
		}
	});
	//实例化AppView
	var appview = new AppView();

	// 3. 定义MVC中的Controller部分 *****
	var AppRouter=Backbone.Router.extend({
		routes:{
			'posts/:id' : 'getPost',  //对应的链接为<a href="#/posts/120">Post 120</a>
		    'download/*path':'downloadFile',//对应的链接为<a href="#/download/user/images/hey.gif">download gif</a>
		    ':route/:action':'loadView', //对应的链接为<a href="#/dashboard/graph">Load Route/Action View</a>
		    '*actions' : 'defaultRoute'
		},


		getPost : function(id){
			console.log('id=' + id);
			alert(id);
		},
		
		downloadFile : function(path){
			alert(path);	// user/images/hey.gif
		},

		loadView : function(route,action){
			alert(route+"_"+action);	// dashboard_graph
		},
		
		defaultRoute : function(actions){
		    alert("Default " + actions);
		}
	});
	//实例化AppRouter
	var app_router=new AppRouter;
	Backbone.history.start();
})(jQuery);
</script>
</html>

 

 

参考:

Backbone: http://backbonejs.org/

                  http://www.csser.com/tools/backbone/backbone.js.html（中文文档）

Backbone唯一的强依赖库参考 http://underscorejs.org/

 

分享到：
Spring与Hibernate集成
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    backbone-marionette-stickit-example:使用 Backbone.Marionette 和 Backbone.Stickit 的简单示例

    在这个"backbone-marionette-stickit-example"中，我们看到的是如何将这三个关键组件——Backbone.js、Marionette.js 和 Stickit——集成到一个简单的示例应用中。首先，我们需要了解这三个组件的核心功能： 1. **...

    backbone-collections-view:Backbone.JS 集合和视图快速教程和快速入门

    **五、快速入门** 在实际项目中，首先需要创建一个模型，定义其属性和行为。然后，可以创建一个集合，将多个模型实例放入其中。接着，定义一个视图，绑定到相应的模型或集合，实现视图与数据的联动。最后，通过事件...

    backbone.js入门教程

    为了更好地理解 Backbone.js 的基本概念，我们可以从一个简单的 HelloWorld 应用程序开始。在这个例子中，我们将创建一个 Model 来表示“Hello World”消息，然后通过 View 渲染它到页面上。 1. **创建 Model**： ...

    backbone-express-spa:Backbone.js + Express.js单页应用程序样板

    该项目应该是一个入门工具包，可以帮助社区基于Backbone.js和Express.js框架构建单页应用程序体系结构。 务实的方法是关键。 可能只是最简单的实现方式，而不是最终确定的应用程序。 它涵盖了前端设计以及开放API的...

    backbone-starterkit:骨干入门套件

    **Backbone.js 入门套件详解** Backbone.js 是一个轻量级的JavaScript库，专为构建可扩展、组织良好的前端应用而设计。它提供了一组基础结构和模式，帮助开发者实现MVC（模型-视图-控制器）模式，使得在JavaScript...

    backbonejs-978-1-7832-8425-2:Backbone Marionette 入门

    《Backbone.js Marionette 入门》是一本专注于JavaScript库Backbone.js的扩展框架Marionette的教程。这本书旨在帮助开发者深入理解如何有效地构建大型、复杂、可维护的单页应用（Single-Page Applications，SPA）。...

    Backbone素材资料

    首先，`Backbone入门基础.mmap`可能是MindMap或类似的学习工具创建的文件，它可能包含了Backbone.js的基本概念、架构和关键组件的概览。这可能包括： 1. **Model**：Backbone中的核心数据模型，用于存储和管理应用...

    hello-backbone:骨干教程来自

    这个标题和描述暗示我们正在讨论一个关于Backbone.js的入门教程，Backbone.js是一个轻量级的JavaScript库，主要用于构建可维护性和可扩展性高的前端应用程序。它提供了一种结构化的方式来组织前端代码，包括模型...

    yolov11重点知识点学习教程 yolov11训练策略

    - 内容：探讨YOLOv11如何整合CSPNet、PANet等结构来提升特征提取与融合效率，以及如何通过注意力机制（如SAM、CAM）来增强模型对关键特征的识别能力。 3. YOLOv11训练策略与优化 - 核心：讨论YOLOv11的训练方法，...

    backbonejs_第二版1

    这是入门Backbone.js的第一步，通常会创建一个简单的实例来展示如何定义模型、视图以及它们之间的交互。 1.2 **Backbone.js核心概念** Backbone.js的核心包括Model、View、Collection和Router四个主要组件，它们...

    我的职业是前端工程师.pdf

    ### 前端工程师核心知识点概览 #### 一、前端工程师的职业发展路径 - **入门阶段**：在这个阶段...通过以上这些核心知识点的学习和实践，前端工程师可以从新手成长为高级工程师，在这个快速发展的行业中保持竞争力。

    Pytorch实现CIFAR10图像分类任务测试集准确率达95%

    在深度学习领域，图像分类是一项基础且重要的任务，它涉及到计算机...对于希望入门深度学习的读者来说，这是一个极好的起点，不仅可以理解深度学习的基本流程，还能了解到不同网络架构的优缺点，以及如何优化模型性能。

Magicbox
Global site tag (gtag.js) - Google Analytics