我的初學Backbone筆記

BackboneJS是一套前端 Javascript Framework 簡介可以參考維基百科 

網路上有很多前輩高手寫的詳細介紹及教學

使用前必須先載入Backbone.js及Underscore.js 

可於Backbone官方網站中找到Backbone 1.2.1 

Underscore的部分可以在Underscore官方網站中找到underscorejs1.8.3 

以下是我練習的範例

1. Model基本使用練習

//1.選告一個變數(Someone)為模型
var Someone = Backbone.Model.extend({
    initialize: function(){
        //此處為初始化時執行的動作
        document.write("Hello");
    }
});

//2.建立實體
var SomeoneObj_1 = new Someone();

//3.設定這個模型實體中的資料用JSON格式
SomeoneObj_1.set({ name: "Thomas", age: 67});

//4.用get取得指定的資料並印於畫面上
document.write(SomeoneObj_1.get("name"));
document.write(SomeoneObj_1.get("age"));

點選JS看完整範例

See the Pen 1.backbone Model練習 by AllenYu (@allenyjs) on CodePen.

2. Collection使用練習

//1.選告一個變數(person)為模型
var person = Backbone.Model.extend({
   defaults: {
      myname: "Allen",
      myaction: "eat"
    },
    initialize: function(){
        document.write(this.attributes.myname+" 初始化 ");
    }
});

//2.選告一個變數(people)為集合
var people = Backbone.Collection.extend({
  model: person
});

//3.建立模型實體
var personObj = new person();

//4.建立集合實體並帶入personObj
var peopleObj = new people({personObj});

//5.取出帶入的結果並印於畫面上
document.write(peopleObj.models[0].attributes.myname);
document.write(peopleObj.models[0].attributes.myaction);

點選JS看完整範例

See the Pen 2. Backbone Collection練習範例 by AllenYu (@allenyjs) on CodePen.

3. View使用練習Part1

See the Pen 3.backbone VIEW基礎應用練習 by AllenYu (@allenyjs) on CodePen.

4. View使用練習Part2

See the Pen 4.backbone VIEW進階應用練習 by AllenYu (@allenyjs) on CodePen.

5. 綜合練習

See the Pen 5.Backbone 綜合應用練習 by AllenYu (@allenyjs) on CodePen.

有了基本的了解後，後面其他進階的用法就可以參考Backbone官方網站上的範例啦~