Backbone.js学习之初识hello-world

说了好久好久要学习Backbone.js，现在终于下定决心开始学习了。然后呢，就根据我的学习进度在这里做个简单的记录，方便新人，也方便我自己以后回忆。

准备

用bower下载这几个库或框架也是醉了。。。由于使用的红杏只能在浏览器上使用，所以在GFW的协同之下真是下载得相当龟速啊！

jquery(或者zepto)，underscore.js,backbone.js终于下载完成，成功引入之后。开始从网上扒helloworld了。。。。不要吐槽我，我就喜欢在学习之前先来个整体的demo看看。

然后我就扒到了https://github.com/the5fire/backbonejs-learning-note这里面的一个 demo。。。另外，这个系列的基本例子都是取自这里，PS:这位仁兄写得不错。当然，我会结合官方文档以及自己的倒腾做出一些改变

代码

(function ($) {            World = Backbone.Model.extend({                //创建一个World的对象，拥有name 和 age属性                defaults: {                name:'Moyi',                length: null        }            });            Worlds = Backbone.Collection.extend({                // World对象的集合                initialize: function(models, options){                    this.bind("add", options.view.addOneWorld);                }            });            AppView = Backbone.View.extend({                el: $("body"),                initialize: function(){                    this.worlds = new Worlds(null, { view : this })                },                events: {                    "click #check": "checkIn",                    "mouSEOver .hehe": "checkIn"                },                checkIn: function(e){                    var world_name = PRompt("请问，您是哪星人？");                    if (world_name == "") {                        world_name = '未知'                    };                    var world = new World({                        name: world_name,                        length: world_name.length                    });                    this.worlds.add(world);                },                addOneWorld: function(model){                    $("#world-list").append("<li>这里是来自<b>" + model.get("name") +"("+ model.get("length") + ")</b>星球的问候！</li>");                }            });            var appview = new AppView;    })(jQuery);

解释一下某些东西

view里面的events：

官方文档是这么说的：

A view that displays a document in a search result might look something like this:

var DocumentView = Backbone.View.extend({  events: {    "dblclick"                : "open",    "click .icon.doc"         : "select",    "contextmenu .icon.doc"   : "showMenu",    "click .show_notes"       : "toggleNotes",    "click .title .lock"      : "editaccessLevel",    "mouseover .title .date"  : "showTooltip"  },  render: function() {    this.$el.html(this.template(this.model.attributes));    return this;  },  open: function() {    window.open(this.model.get("viewer_url"));  },  select: function() {    this.model.set({selected: true});  }});

我私以为呢，这里列出来的event都是熟悉的，好像hover事件就没有，不过好在可以使用mousein,mouseout来模拟。

其他

本系列的一些文章纯属自己学习的时候做的记录。我相信会有极大一部分是不正确的，或者是我主观想法。若是看客，尽管批评指正，小弟感激不尽。另外，文章中的一些观点，还请自行查阅相关文档。