backbone helloword入门实例

什么是Backbone？

backbone.js，是开发web app的框架。凭借它，我们可以使用javascript编写复杂交互的web app，因为backbone提供了强大的对模型、视图和交互的抽象。以前，我们开发web app，比较依赖比如jQuery：

1。将所有交互看作对dom节点的操作，虽然也可通过事件（event）解藕复杂的交互，但是无法脱离dom模型，包括事件的传递，都是沿着dom树进行的；

2。即使是有起到模型作用的对象，一般也通过jQuery附着在dom树上

Backbone.js 是一个模型(Model)-视图(View)-控制器(Controller) 的MVC 框架。通过它可以轻松将页面中的数据、逻辑、视图解耦，依照Backbone进行代码结构组织，你可以将项目中的数据交互、业务逻辑、用户界面等工作，分配给多个同事同时开发，并能有序地组织到一起。同时，这对于大型和复杂项目的维护开发非常有帮助。下面，通过编写最简单的应用，方便初学者上手。

哪些著名的网站也在用Backbone？

LinkedIn mobile

WordPress.com

Foursquare

还有很多很多，比如 Hulu ， Do ， Groupon Now! ， Pandora 等等！

谁用谁知道，基于Backbone的应用真的太多太多了。存在即是合理的，为啥大家都用它，一定有它的道理！

Backbone如何入门，初学者要怎么开始？

在正式学习Backbone之前，你需要准备一些东西：

首先，你需要获取Backbone框架源文件：http://documentcloud.github.com/backbone/

Backbone依赖于Underscore框架的基础方法，因此，你同时需要下载Underscore框架的源文件：http://documentcloud.github.com/underscore/

在Backbone中，对DOM和事件的操作依赖于第三方库（如jQuery或Zepto），你只需要选择其中一个下载：

jQuery：http://jquery.com/

Zepto：http://zeptojs.com/

看起来好像挺麻烦的样子，但Backbone的目的是在于使用简单的框架来构建复杂的应用，因此麻烦并不表示它很复杂。完整引入如下：

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="backbone-min.js"></script>

注意：jquery要使用1.8版本以后的，否则有些功能没有。

Backbone主要涉及部分：model，view，collection，router(路由器)。Backbone虽然实现的是MVC模式，但它并没有提供控制器(Controller)组件，而实际起控制作用的也是由View承担，所以在最基本情况下只需要model，view就可以建立起一个应用。而collection，router(路由器)，有兴趣的可作为扩展。

数据模型(model)

模型的核心是数据，但其中也可以包含一些简单的逻辑：转换、验证、计算属性和访问控制。

1.创建model

<script type="text/javascript">
// 定义People模型类,同时设置默认属性值
var People = Backbone.Model.extend({
    defaults : {//默认属性值，每个实例化的对象默认具备这些属性
        name : '张三',
        age : '22',
        address : '北京'
    }
});

// 实例化模型对象
var people = new People();

</script>

通过Model的扩展方法extend创建个模型类People，通过这个类可以实例化出具体的模型对象。

2.操作model属性值

一旦创建了model实例，可以通过set、get来操作属性。set方法为属性赋值，get方法获得属性值。

var name = people.get("name"));
people.set("name", "李四");

视图(view)

view是负责与dom元素打交道的，通过视图可以渲染页面、可以为dom元素绑定事件来监听其动态、也可以负责处理业务逻辑。

1.创建视图

<div id="myDemo">
    <p>
    <input type="button" value="Create" id="create" />
    <input type="button" value="Read" id="read" />
    <input type="button" value="Update" id="update" />
    <input type="button" value="Delete" id="delete" />
    </p>
</div>
<script type="text/javascript">

var PeopleView = Backbone.View.extend({
	el : $("#myDemo"),//纯的dom元素，用于该view操作的具体对象
	initialize : function() {
		//view的初始化方法，创建view实例时执行
	},
	events : {//给dom元素绑定事件  格式：事件名称 选择器 : 事件处理函数
	   'click #create' : 'createData',
           'click #read' : 'readData',
           'click #update' : 'updateData',
        'click #delete' : 'deleteData'
	},
	createData : function() {
            // todo
			
    },
    readData : function() {
            // todo
    },
    updateData : function() {
            // todo
    },
    deleteData : function() {
            // todo
    },
    render : function() {
	    //利用el属性渲染页面 
		//如：this.el.innerHTML = 'Hello World!';
    }
});
//实例化view
var view = new PeopleView();
view.render();//渲染页面，一般可用在初始化方法initialize中
</script>

通过View的扩展方法extend创建个视图类PeopleView，通过这个类可以实例化出具体的视图对象。同时视图对象还存在个model属性，可以在实例化视图时作为参数传入，如：var view = new PeopleView({model:people}), 这样视图对象内部就可通过this.model来或者这个模型实例。

好的，上面已经对model、view的单独使用做了描述，下面做个完整的demo，将二者结合起来。

程序目标：修改个人信息。如：姓名、年龄。

在线演示：

输入新的姓名或年龄，点击"修改"按钮，可看到下面显示信息的变化

引入js

<script type="text/javascript" src="http://www.see-source.com/js/backbone/jquery-1.8.1.js"></script>
<script type="text/javascript" src="http://www.see-source.com/js/backbone/underscore.js"></script>
<script type="text/javascript" src="http://www.see-source.com/js/backbone/backbone.js"></script>

Html代码

<body>
<div id="myDemo"  style="border:#66CC33 solid 1px; padding:5px;"></div>
</body>

Js代码

<script type="text/javascript">
//步骤1. 创建model类。
var People = Backbone.Model.extend({
    //设置默认的属性
    defaults : {
        "name" : '',
		"age" :0
    }
});
//步骤2. 实例化model
var people = new People({
        "name" : '阿三',
		"age" :22
    });
//步骤3  创建view类
var PeopleView = Backbone.View.extend({
	//设定这个视图的dom元素，也可以通过设定tagName, className, id 或者 attributes。如果没有特别设定，Backbone会为它套上空的div标签
	el : $("#myDemo"),
	model:people,
	initialize : function() {//构造方法
		this.render(); //创建view实例时，先渲染下页面
	},
	events : {//给dom元素绑定事件
		"click .submit" : "update" //"修改"按钮添加click事件，update为事件处理函数
	},
	update : function(){
	    var name = $("#people_name").val();//获取姓名
		var age = $("#people_age").val();//获取年龄
		this.model.set("name", name);//更新到model中
		this.model.set("age", age);
		this.render();//重新渲染页面
	},
    render : function() {//渲染页面
	    var html = "姓名：<input id='people_name' value=" + this.model.get("name") + "><br/>";
		html += "年龄：<input id='people_age' value=" + this.model.get("age") + "><br/>";
		html += "<input type='submit' class='submit' value='修改'><br/>";
		html += "我的姓名："+this.model.get("name")+",我的年龄："+this.model.get("age")+"<br/>";
        this.el.innerHTML = html;
    }
});
//步骤4 实例化view, 同时执行构造方法initialize
var view = new PeopleView();
//view.render();
</script>

数据模型(model)

视图(view)

+友情链接