Backbone Who is your friend 实例学习
Backbone.js Tutorial Who is your friend
例子demo地址 http://thomasdavis.github.com/examples/backbone-101
学习文档地址 http://thomasdavis.github.com/2011/02/01/backbone-introduction.html
backbone 官方将backbone 描述成能为重web应用提供结构化的方案。在使用了backbone 一周后，不管尺寸大小，我都会backbone .
我打算写一个快速的介绍给想要了解它背后机制的朋友。我也只是个初用者，乐于接受建议和意见，以改善代码。
我也非常渴于听到你关于Javascript MVC的想法，以及任何有利于Javascript逻辑的库。
了解模型示图控制器模式
html
Back to home
Backbone.js Tutorial – by noob for noobs
The official website describes Backbone.js as a library to supply structure to Javascript heavy web applications. After using Backbone.js for a week I could never see myself building any sort of Javascript functionality regardless of size without using Backbone.js or alternatives.
I have decided to write a quick introduction for those trying to grasp the mechanics behind it. I am only a beginner also and would love suggestions and tips to improve my code.
I am also very curious to hear what you think about how MVC ties into Javascript development and the most effective library you have used for logically organizing your Javascript.
Would be great to get a discussion on MVC vs MVVM vs others etc leave comments at the bottom!
Also could you implement this example better in another framework?
Understanding the Model View Controller Paradigm
I have used many frameworks which promote that they use MVC. I don’t think I have ever seen the same fundamental principals implemented the same way.
Backbone.js has 4 classes: Models, Views, Controllers and Collections. The Models and Collections class work hand in hand and when combined essentially make up the M(model) of MVC.
The main concept I follow when using Backbone.js is to make Views listen for changes in the Model and react accordingly. I would recommend bookmarking the homepage documentation and I perusing the annotated source code.
Getting started
I am going to run you through a basic tutorial that should get you on the right path if you are a bit lost like I was when I started.
First of all we are going to just setup a basic page and include Backbone.js and Underscore.js(a dependency of Backbone.js)
<!DOCTYPE html>
<html>
<head>
<title>I have a back bone</title>
</head>
<body>
<button id="add-friend">Add Friend</button>
<ul id="friends-list">
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
</body>
</html>
第二步： 建立主视图
每个视图都与一个dom 元素有关，你可以在这里读为什么。http://documentcloud.github.com/backbone/#View-el
因为这是我们的主视图，所以是boy
如果元素不存在，，backbone 会试图创建它
$(function(){
window.AppView = Backbone.View.extend({
el:$("body"),
events:{
"click #add-friend" : "showPrompt"
},
showPrompt: function(){
var friend_name = prompt("Who is your friend?");
}
});
var appview = new AppView;
});
我们使用jquery来确保页面加载完后执行，接着我们创建了程序的主视图，并传递相应的参数，body是这个视图的相关元素
events属性非常强大，让我们为视图增加兼听。在这个例子中我们为
#add-friend监听了事件。
创建了AppView之后，我们可以立即实例化它。
收集模型
Backbone 里的model 可以代表任何对象，在这里是一个朋友。我们可以不考虑结构来构造model ,但是不能遍历它们。因此backbone 创建了collection Class 来组织对象。
现在变得好玩了。你可以为模型和Collections设立监听或事件。因此无论何时数据改变，我们可以执行事件来重新生成。
我们现在来写些代码向Friend Collection中增加朋友，当数据改变时新增一条数据
window.Friend = Backbone.Model.extend({
name: null
});
window.Friends = Backbone.Collection.extend({
initialize: function(models,option) {
this.bind("add",option.view.addFriendLi);
}
});
window.AppView = Backbone.View.extend({
el:$("body"),
initialize: function() {
this.friends = new Friends(null,{view:this});
},
events:{
"click #add-friend" : "showPrompt"
},
showPrompt: function(){
var friend_name = prompt("Who is your friend?");
var friend_model = new Friend({name:friend_name});
this.friends.add(friend_model);
},
addFriendLi:function(model) {
$('#friends-list').append("<li>" + model.get('name') + '</li>');
}
});
var appview = new AppView;
建立了模型， Friend, json对象定义属性，， 集合Friends 初始化initialize方法 绑定了事件 this.bind('add') 事件名称 ，指定视图的处理函数
参数为models 与option
AppView initialize 里初始化Collection 传入空，以及本视图，增加处理函数。。。。
可以看出主视图建立Collection Collection里写兼听 ，，，一有改变就触发事件。。。。
