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來模擬。

其餘

本系列的一些文章純屬本身學習的時候作的記錄。我相信會有極大一部分是不正確的，或者是我主觀想法。如果看客，儘管批評指正，小弟感激涕零。另外，文章中的一些觀點，還請自行查閱相關文檔。