Backbone.js

Collectionを利用する

Collectionとは、モデルの集合です。 collection.model モデルのプロパティを上書きします。 var C = Backbone.Collection.extend({ model: M }); collection.toJSON() コレクションモデルの、属性の配列を返します。 (function() { // モデル var M = Backb…

eventsを使う

index.html <html lang="ja"> <head> <meta charset="utf-8"> <meta name="Content-Type" content="text/html charset=utf-8"/> </head> <body> <script type="text/template" id="foo"> <p><u><%- n %></u></p> </script> <script src="js/underscore.js"></script> <script src="js/jquery.js"></script>…</body></html>

elとは

el(element) 指定したtagNameやclassNameの属性(element)になります。 elの属性にセレクタを渡すと、$elという属性にelのjQueryオブジェクトが入ります。 jqueryのappendなどに利用でき、elに指定する時点で、DOM上に該当する要素がなければなりません。 v…

メソッドを実行

Modelで設定した値をメソッドで切り替えます。 (function() { //モデル var Foo = Backbone.Model.extend({ defaults: { name: '', place: '', judge: false }, }); var Bar = new Foo(); Bar.set({ judge: true //judgeをtrueにセット }); Bar.toggle(); //…

set 値をセットする

Modelを継承し、値をセットした後その値を置換えてみます。 (function() { //モデル継承 var Foo = Backbone.Model.extend({ defaults: { //デフォルト値をセット name: '', age: 0 } }); var Bar = new Foo(); Bar.set({ name: "aaa", age: 14 }); Bar.set(…

find Modelのデータを見つけてくる

Backbone.jsのCollectionで、Modelのデータをfindしてきます。 (function() { //モデル継承 var Foo = Backbone.Model.extend({ defaults: { //デフォルトの要素を設定 name: '', place: saitama } }); var Bar = new Foo(); Bar.set({ //値をセット name: "…

Collectionを使用する #cid

Collectionは、Modelにあるデータをリストし、操作できます。 (function() { //モデル継承 var Foo = Backbone.Model.extend({ defaults: { name: '', age: 0 }, initialize: function() { console.log(this.cid + JSON.stringify(this)); } }); var Bar = n…

Modelを使用する

Modelは、アプリケーション内で利用するデータの処理をします。インスタンスを作成する際は、newを利用しModelを継承します。 var Foo = Backbone.Model.extend({ // 継承 defaults: { // インスタンス作成時、デフォルトの値を設定 "name": '', "age": 0, }…

Backboneに触る

githubリポジトリからbackbone.jsをダウンロードします backbone-master > backbone.js backbone-master > vender > jquery.js underscore.js 上記を作成したjsフォルダへいれます test.jsをファイルを作成します htmlファイルを作成し、jsファイルを読み込…

defaultを設定する #default #Model

(function() { var Foo = backbone.Model.extend({ //モデル拡張 default: { name: '', flag: true } }); var foo = new Foo([ //配列のため[]で囲む { name: 'okamoto', flag: false }, { name: 'suzuki' //flagはtrueとなる } ]) console.log(foo.toJSON);…

viewの書き方 #initialize #view #インスタンス #el

(function() { var Foo = Backbone.View.extend({ //設定 }); }); var foo = new Foo({ 初期化 }); }); 1つしかない要素(bodyなど)に対応するviewを作成する場合 var Foo = Backbone.View.extend({ // インスタンス生成と同時に設定 el: "<body>" }); var foo = ne</body>…

tagNameとclassNameの使い方

var Foo = Backbone.View.extend({ tagName: "p", //p要素と className: "bar" //barクラスを設定 }); var foo = new Foo(); $("body").append(foo.el); //htmlのbody要素に付与される console.log(foo.el); Daydreamin'Ariana GrandePop¥250provided courte…

外部テンプレートの使い方 #template

html <html lang="ja"> <head> <meta charset="utf-8"> <meta name="Content-Type" content="text/html charset=utf-8"/> <title>js</title> </head> <body> <script type="text/template" id="foo"> <%- name %> </script> <script src="js/underscore.js"></script> <script src="js/jquery.js"></body></html>

onとtriggerの使い方

(function() { var obj = {}; //初期化 _.extend(obj, Backbone.Events); //第1引数にオブジェクト、第2引数にメソッドを指定 obj.on("al", function(m) { //イベント"al"が発火した際実行される、コールバック関数をイベントに紐付ける alert("Hi" + m); //…

callback関数 #コールバック

PHPのコールバック関数場合 foo; // '呼び出される' } }