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来模拟。

其余

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