|
JSライブラリ > Backbone.js Backbone.js †http://www.cyokodog.net/blog/backbone-js/ http://www.slideshare.net/mobile/makingx/backbonejsangularjs http://qiita.com/opengl-8080/items/36e9b380c64ba7766511 https://appkitbox.com/knowledge/javascript/20130604-52 Backbone.js とは †backboneの構成要素 †Model †使用例 †var Book = Backbone.Model.extend({
// 初期値
defaults: {
id : null
,isbn : null
,title : 'default'
,price : 1000
},
// save時に呼び出すURL
urlRoot: "/backbonejs/book/" ,
// 入力チェック
validate : function(attrs){
var errMsg = "";
if (_.isEmpty(attrs.title)) {
errMsg = "タイトルを入力して下さい";
}
return errMsg;
}
});
// モデルのインスタンス生成
var book = new Book({id : 1, isbn : "test1", title : "テスト1"});
// エラー時の処理を指定
book.on("invalid", function(model, error) {
alert(error);
});
// インスタンスの中身を表示
console.log(book.toJSON());
// タイトルを変更
var ret = book.set({ title : "テスト2" }, {validate : true});
if (!ret) {
console.log("入力チェックエラー");
}
console.log(book.toJSON());
// タイトルを空に変更
ret = book.set({ title : "" }, {validate : true});
if (!ret) {
console.log("入力チェックエラー");
}
console.log(book.toJSON());
モデルのメソッド †
モデルのトリガー †onメソッドで以下のトリガーをハンドリングする事で、値の変更時などにイベントを処理を行う事が可能
save、destroy、fetch 時の挙動 †
※ リクエストURLの /xxxx は urlRoot で指定したURL Collection †使用例 †var Tasks = Backbone.Collection.extend({
model: Task
,localStorage: new Store("book-app")
});
WebAPIの呼び出し †localStorageへの保存 †View †実装サンプル †TODO:
|