38elements.github.io - Backbone.jsメモ

Backbone.jsメモ

38elements.github.io Spined HTML

Backbone.jsメモ Backbone.jsメモ Document Model document model.validate(attrs)はモデルの属性を引数にとる。 model.validate(attrs)は不適切な場合はエラー文を返す。 invalidイベントにエラーが渡される。 model.validationErrorにエラーが格納される。 model.save()はデフォルトでvalidate()が実行される。 model.set()とmodel.unset()では{validate:true}が渡されたときvalidate()が実行される。 urlにアクセス先を指定する View document tagNameで指定したElementをrootにした要素を表す。 elプロパティがその生成された要素を格納する。 $elは$(el)と同じ classNameやidを指定することができる。 eventsでViewに関するイベントを登録する。 eventsは以下の形式 handlerはViewのプロパティ { ‘event_type selector’: ‘handler’ } elに既にページに存在しているCSSセレクタや$elemを指定してそれをroot要素にすることができる。 view.setElement(elem)でviewに紐づいているelemを切り替えることができる。 fooView = new FooView({el: elem, model: fooModel}); initializeでモデルとrender()をbind redner()はDomの処理を書くHodgepodgedocument CollectionはModelの集合 modelにModelを指定する urlにアクセス先を指定する CollectionにObjectも格納することができる Collection.get(id)はmodel.idを指定する。 modelのid属性は特別な意味を持つ。 collection.add([a,b])はa,bを加える collection.remove([a,b])はa,bを削除する add,removeイベントハンドラを付与することができる 所属しているモデルに対してイベントハンドラを付与することができる {‘merge’: true} set(data)はidに応じてadd, remove, changeイベントを起こす set(data)はidが存在しているものは更新、ないものは削除、新規は追加 reset(data)はdataに置き換える resetイベントが発生する underscorejsのメソッドを利用することができる remove()はcollectionのみ指定したmodelを削除する Event デフォルトのイベント一覧 * Backbone.Eventsを継承したものがイベントを受け取ることができる。 trigger(‘event’) once(‘event’) change:foo_attr collection.set()はidに応じてadd, remove, changeイベントを起こす on() off() trigger() trigger()は複数のイベントを起こすことができる obj.trigger('event1 event2', 'arg') listenTo()は他のオブジェクトで発生したイベントを受け取る listenToOnce()もある stopListening()はlistenTo()をやめる view.eventsに登録することもできる Serverとの通信 ModelやCollectionのurlにアクセス先を指定する parse()はサーバーから送られてきたデータを変換する collection.fetch()で{reset: true}を指定するとresetする save()はPUTメソッドでリクエストを送る。{patch: true}にするとpatchメソッドにする。validate()を実行する destroy()はDELETEメソッドを送る Router document Backbone.Router.extend()でrouterを生成した後、Backbone.history.start()する routesでurlとコールバック関数をマッピングする。 router.navigate()はリダイレクトのようなもの デフォルトではリダイレクト先のコールバック関数を実行しない {trigger: true}でリダイレクト先のコールバック関数を実行する {replace: true}で履歴を上書き router.execute()はマッチするたびに実行される関数 デフォルトのルーティングは’*path’: ‘default_func’ すべてのイベントを捕捉 Model,View,Router,Collectionに下記のイベントを登録する this.on('all', handler); Marionette.jsメモ ≪PHP Github Star Ranking at 2016/09/09 Main Java Github Star Ranking at 2016/09/01≫