开始backbone

官方网站是这样描述backbone.js的,它是一个用来组织大量JS的良好框架。

了解什么是MVC模式
我用过很多声称是MVC的框架,但我认为我并未见过遵循相同的规则来实现相同的方法。
backbone.js有四种类型:Models, Views, Controllers和Collections. Models和Collections类关系密,当它们组合在一起就行成了M(model).

当我在用Backbone.js的时候,我所采用的主要内容是让Views来监听Model的改变,然后其做出相应的改变。我推荐把backbone的文档和源码都仔细的阅读一番

开始

我在开始的时候,往往习惯于让你快速的浏览一下我的整个示例,让你有一个正确的学习路线,不致于像我似的刚开始学习的时候误入歧途。
首先,我来建立一个页面,它包含backbone.js和Underscore.js(这是我们的主角所依赖的Js库)。
<!DOCTYPE html>
<html>
<head>
<title>I have a back bone</title>
</head>
<body>
<button id="add-friend">Add Friend</button>
<ul id="firends-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>

设立主View
每一个view都会有一个相应的DOM element和它相关联。至于为什么你可以参考以下内容:
以下内容来自backbone的官方网站:http://documentcloud.github.com/backbone/#View-el,

elview.el,所有的Views总是有一个DOM element.(the el property), 不管它们是已经在page中还是不在。这样,views在任何时候都可以显示,也可以全部插入DOM中。为了追求高效的UI显示,尽量用更少的重排和重画。 this.el可以通过view的tagName, className,id和attributes,这些来构建。而如果以上列举的并没有出现,那么会创建一个空的div

var ItemView=Backbone.view.extend({tagName:'li'});

var BodyView=Backbone.view.extend({el:'body'});

var item=new ItemView();
var body=new BodyView();

因为这是我们的master view,所以我们会设body。如果一个指定的el(element)不存在,那么Backbone.js就会试图创建它。
(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);
我们仅仅是把我们的Backbone代码用jQuery来包装了一下来确实我们的page能正确的加载。然后我们创建我们的主程序View通过扩展Backbone 并传递一个JSON对象做为参数。我们指定‘body'做为我们View相关的element.

events属性是非常有用的并且让我们来监听我们的views.在这个示例中,我们绑定一个click事件到id为"add-friend"的按钮上。

我们已经设置了我们的程序View, 我们现在可以在任何时候来初始化它了。

Collecting the Models
一个model在backbone.js中可以代表任何的一个实体,而在这个示例中我们希望它代表一个朋友。我们可以很轻松的创立一个朋友Model不用任何的结构,但是它对我们是作用不大的,因为我们不能迭代它们除非我们让他们在一起。Backbone.js通过一个Collection Class让我们来排列我们的models

现在让我们来开始我们之中的有趣的部分,你可以绑定listeners/events至一个Models和collections.不论何时我们改变任何的数据都会让evens来做出相应的改变。
让我们把一个friend Model加到我们的firend collection.然后让我们来绑定一个listener来创建一个新的list element当相应的数据被改变的时候。

(function($){
    Firend=Backbone.Model.extend({
    //Create a model to hold firend attribute
    name:null
    });
    
    Friends=Backbone.Collection.extend({
        //This is our friends collection and hols our friend models
        initialize:function(models, options){
            this.bind("add", options.view.addFriendLi);
            //Listen for new additions to the collection and all a view function if so
        }
    });
    
    AppView=Backbone.View.extend({
        el:$("body"),
        initialize:function(){
            this.friends=new Friends(null, {view:this});
            //Create a friends collection when the view is initialized,
            //Pass it a reference to this view to create a connection between the two
        },
        events:{
            "click #add-friend":"showPrompt"
        },

    addFriendLi:function(model){
                $("#friends-list").append("<li>"+model.get('name')+"</li>");
            },
        showPrompt:function(){
            var friend_name=prompt("who is your friend?");
            var firend_model=new Friend({name: friend_name});
            this.firends.add(friend_model);           
        }
    });
    
    var appView=new AppView;
})(jQuery);

Demo:http://thomasdavis.github.com/examples/backbone-101/

Code:https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/backbone-101

 

原文:http://thomasdavis.github.com/2011/02/01/backbone-introduction.html

你可能感兴趣的:(backbone)