//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.
//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.
See the Pen 3.backbone VIEW基礎應用練習 by AllenYu (@allenyjs) on CodePen.
See the Pen 4.backbone VIEW進階應用練習 by AllenYu (@allenyjs) on CodePen.
See the Pen 5.Backbone 綜合應用練習 by AllenYu (@allenyjs) on CodePen.
有了基本的了解後，後面其他進階的用法就可以參考Backbone官方網站上的範例啦~
