★ソースコード01
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script> <script type="text/javascript"> $(function(){ var Model = Backbone.Model.extend({ defaults: { name: '', tag: '', price: 0 } }); var Model = new Model({ name: 'ペンギンくん', tag: 'PC001', price: 350 }); var json = Model.toJSON(); $('#output').html(JSON.stringify(json)); }); </script> </head> <body> <div id="output"></div> </body> </html> |
★メモ
Bracketsの自動閉じカッコは、「編集」→「自動閉じカッコ」でもとに戻す。
toJSON() メソッドは、Date オブジェクトを表す文字列を返します。
toJSON() の呼び出しは、Date オブジェクトの値を表す文字列 (toISOString() を使用) を返します。
1 2 3 |
const event = new Date('August 19, 1975 23:15:30 UTC'); const jsonDate = event.toJSON(); console.log(jsonDate); |
JSON.stringify() メソッドは、ある JavaScript のオブジェクトや値を JSON 文字列に変換します。
1 2 |
console.log(JSON.stringify({x:5, y:6})); //{"x":5,"y":6} |
モデルに設定された情報をJSON形式で取得します。
toJSON()メソッドを呼び出すことでJSON形式でモデルの情報を取り出せます。
取得したJSONを id=”output”のタグに表示します。
1 2 |
var json = model.toJSON(); $(‘#output’).html(JSON.stringify(json)); |
★ソースコード03
このコードは、「Set」ボタンをクリックすると。
modelオブジェクトのnameプロパティの値を
「ペンギンクッキー」から「くじらキャンディー」に変更している。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script> <script type="text/javascript"> $(function() { var Model = Backbone.Model.extend({ defaults: { name: '', tag: '', price: 0 } }); var model = new Model({ name: 'ペンギンクッキー', tag: 'PC001', price: 350 }); var Button1View = Backbone.View.extend({ tagName: 'input', id: 'button01', attributes: { type: 'button', value: '表示' }, events: { 'click': 'onClick' }, onClick: function(event) { $('#output').append("name:" + model.get('name') + '<br/>'); $('#output').append("tag: " +model.get('tag') + '<br/>'); $('#output').append("price: " + model.get('price')+'<br/>'); } }); var Button2View = Backbone.View.extend({ tagName: 'input', id: 'button02', attributes: { type: 'button', value: 'Set' }, events: { 'click': 'onClick' }, onClick: function(event) { model.set('name', 'くじらキャンディー'); } }); var b1View = new Button1View; $('#ButtonFrame').append(b1View.el); var b2View = new Button2View; $('#ButtonFrame').append(b2View.el); }); </script> </head> <body> <div id="ButtonFrame"></div> <div id="output"></div> </body> </html> |
メモ
attributesはsetとかで設定される値をオブジェクトして持っているやつです。
Backbone.Modelのattributesにオブジェクトを設定するときの注意点など。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//まずsetでattributesを設定 var Model = Backbone.Model.extend(); var m = new Model(); m.set(‘hoge’, ‘fuga’); m.set(‘foo’, {bar: ‘bax’)); //toJSONでattributesを取得して、値を更新する var attrs = m.toJSON(); attrs.hoge = ‘new fuga’; attrs.foo.bar = ‘new baz’; console.log(m.attributes); //=> { hoge: 'fuga', foo: { bar: 'new baz' } } |
(1)用意するファイル
(2)Model
①基本操作
・Modelを作成する
・インスタンス
・コンストラクタ
・staticメンバー
・プロパティの設定、取得
・プロパティのデフォルト値を設定
・コンストラクタの引数でプロパティを設定
・プロパティを持つか確認
・プロパティを削除
・プロパティを全て取得:attributes で全プロパティをオブジェクトで取得できる。
②Underscore.jsのメソッドを使う
③RESTfulリクエスト
④イベントの監視
(3)Collection
①基本操作
②Underscore.jsのメソッドを使う
③RESTリクエスト
(4)View
①Viewを作成する
②コンストラクタを定義する
③DOMオブジェクトを取得する
④jQueryオブジェクトを取得する
⑤既存のDOMを紐付ける
⑥ViewのDOMオブジェクトを起点にしてjQuery関数を使用する
⑦renderメソッド
⑧イベントハンドリングの定義を一箇所にまとめる
(5)Router
SPA なページを作る時に必要になる URL の操作や、 URL 変更のイベントを制御するための仕組みを提供してくれる。
①Routerを作成する
1 2 |
var MyRouter = Backbone.Router.extend(); var myRouter = new MyRouter(); |
②コンストラクタを定義する
1 2 3 4 5 6 |
var MyRouter = Backbone.Router.extend({ constructor: function() { console.log(‘constructor’); } }); var myRouter = new MyRouter(); |
③パスが変更された時のイベントハンドラを定義する
④パスを変更する
⑤ハッシュタグを使わない
(6)標準で用意されてるイベント
①Model
②Collection
③RESTリクエスト関係のイベント
④サーバーリクエストが成功した時のイベント
⑤サーバーリクエストが失敗したときのイベント
●ルーターとは
ルーターとは URL を解析して、URL のパターンごとに開発者が割り当てた関数もしくはメソッドを実行する機能をもつライブラリのことを指します。
ルーターの代わりにルーティングが同じ意味の用語として使われます。
●ねらい
ルーターを導入することで次の項目の改善が期待されます。
①保守性の向上
ルーターを導入する場合、レイアウトとコンテンツを分離することになります。
HTML ファイルはただ1つの index.html に限定されます。
コンテンツは別のテキストファイルとして保存して、Ajax 通信で取得することになります。
複数の HTML ファイルを提供する場合と比べて、レイアウトを修正する場合の作業量が減ります。
コンテンツを追加、修正する際に、誤って別の箇所を編集してしまう可能性が減ります。
結果として、テンプレートエンジンを導入する場合と同じ効果を得ることになります。
②ページの切り替え速度の向上
ページを切り替える際にコンテンツの部分だけ更新すればすむので、毎回ページをまるごと読み込む方法と比べて、通信量が減るので、結果として、ページの表示速度が向上します。
通信量をさらに減らすために localStorage や IndexedDB にコンテンツを保存する選択肢があります。
●検討課題
ルーターを採用するにあたり、次の項目を検討しました。
①URL の形式
②コンテンツの保存形式
③リンクの対象範囲
④ルーターとフレームワークの組み合わせ
並行して、次の項目を検討しました。
⑤通信量を減らすためのビルドツールの併用
⑥Ajax 通信ライブラリ
この記事へのコメントはありません。