backboneJS入门
backbone.js是一个web端javascript的mvc框架，算得上是重量级的框架。它能让你像写java代码一些写js代码，定义类，类的属性以及方法。更重要的是它能够优雅的把原本无逻辑的javascript代码进行组织，并且提供数据和逻辑相互分离的方法，减少代码开发过程中的数据和逻辑混乱。
关于backbone的更多介绍参看这个：http://documentcloud.github.com/backbone/, http://backbonetutorials.com/
很好的一篇入门文章:http://www.the5fire.com/backbone-tutorials-catalogue.html
backbone.js的几个部分简要介绍:
model:对象
collection:model对象的一个有序的集合
router:控制url跳转
view：用来显示你的model中的数据到页面的，同时它也可用来监听DOM上的事件然后做出响应
本来想把之间的逻辑用图画出来的，不过太懒了....
接下来看段入门代码，看懂了大概backboneJS是干嘛的基本知道啦。里面用了个underscore的模板引擎，我也没用过这个....
<!DOCTYPE html>
<html>
<head>
<title>the5fire.com-backbone.js-Hello World</title>
</head>
<body>
<button id="check">click</button>
<ul id="world-list">
</ul>
<a href="#actions">testActions</a>
<a href="#/posts/120/">testPost</a>
<a href="#/download/user/images/hey.gif">download gif</a>
<a href="#/dashboard/graph">Load Route/Action View</a>
<div id="search_container"></div>
<script type="text/template" id="search_template">
<label><%=search_label %></label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
</body>
<!-- 顺序有关系，jq underscore backbone -->
<script src="jquery-1.7.1.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone.js"></script>
<script type="text/javascript" >
(function($){
World = Backbone.Model.extend({
name:null
});
Worlds = Backbone.Collection.extend({
initialize:function(models,options){
this.bind("add",options.view.addOneWorld);
}
});
var AppRouter = Backbone.Router.extend({
routes:{
"/posts/:id":"getPost",
"/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"
},
defaultRoute:function(actions){
//do something
console.log("defaultActions--"+actions);
},
getPost:function(id){
console.log(id);
},
downloadFile:function(path){
console.log(path); // user/images/hey.gif
},
loadView:function(route,action){
console.log(route + "_" + action); // dashboard_graph
}
});
AppView = Backbone.View.extend({
el:$("body"),
search_container:$("#search_container"),
initialize:function(){
this.Worlds = new Worlds(null,{view:this});
this.render();
},
events:{
"click #check": "checkIn",
"click #search_button":function(event){
alert($("#search_input").val());
}
},
checkIn:function(){
var world_name = prompt("?");
if(world_name == "")
world_name = '未知';
var world = new World({name:world_name});
this.Worlds.add(world);
},
addOneWorld:function(model){
$("#world-list").append("<li>my name is<b> " + model.get('name') + "</b>--- hello world!!</li>");
},
render:function(){
var template = _.template($("#search_template").html(),{search_label:"Input Something:"});
$(this.search_container).html(template);
}
});
var appview = new AppView;
var app_router = new AppRouter;
Backbone.history.start(); //需要通过调用Backbone.history.start()方法来初始化这个Router
})(jQuery);
</script>
</html>
后面我还会分析别人给出的一个backboneJS简单例子实现
