在HTML檔案中引入require.js並將data-main設為js資料夾中的common檔案，由於requireJS預設副檔名為js所以可以省略
<html>
<head>
<script data-main="js/common" src="js/require.js"></script>
</head>
<body>
123
</body>
</html>
require.config({
paths: {
jquery: 'jquery-2.1.4.min',
underscore: 'underscore',
backbone: 'backbone'
}
});
require(['test1']);
define(function (require) {
var $ = require('jquery');
var _ = require('underscore');
var backbone = require('backbone');
$(function(){
alert("a");
var JQv=$().jquery;
var BKv=Backbone.VERSION;
var Undv=_.VERSION;
var myView = Backbone.View.extend({
el: $("body"),
initialize: function () {
this.showLoadinfo(JQv,Undv,BKv);
},
showLoadinfo: function (JQv,BKv,Undv) {
var hStr="<h1>載入測試</h1><ul id='mylist'>";
hStr+="<li>1. JQuery版本:"+JQv+"</li>";
hStr+="<li>2. Backbone版本:"+Undv+"</li>";
hStr+="<li>3. underscore版本:"+BKv+"</li>";
hStr+="</ul>";
this.$el.html(hStr);
}
});
var myLoadinfoView = new myView();
});
});
在HTML檔案中引入require.js並將data-main設為js資料夾中的test2檔案，由於requireJS預設副檔名為js所以可以省略
<html>
<head>
<script data-main="js/test2" src="js/require.js"></script>
</head>
<body>
123
</body>
</html>
require.config({
paths: {
jquery: 'jquery-2.1.4.min',
underscore: 'underscore',
backbone: 'backbone',
myTestFunc: 'myTestFunc'
}
});
require(['test1']);
require(['common2'], function (common){
require(['myTestFunc']);
});
define(function (require) {
var $ = require('jquery');
var _ = require('underscore');
var backbone = require('backbone');
$(function(){
alert("a");
var JQv=$().jquery;
var BKv=Backbone.VERSION;
var Undv=_.VERSION;
var myView = Backbone.View.extend({
el: $("body"),
initialize: function () {
this.showLoadinfo(JQv,Undv,BKv);
},
showLoadinfo: function (JQv,BKv,Undv) {
var hStr="<h1>載入測試</h1><ul id='mylist'>";
hStr+="<li>1. JQuery版本:"+JQv+"</li>";
hStr+="<li>2. Backbone版本:"+Undv+"</li>";
hStr+="<li>3. underscore版本:"+BKv+"</li>";
hStr+="</ul>";
this.$el.html(hStr);
}
});
var myLoadinfoView = new myView();
});
});
//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官方網站上的範例啦~