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:
|