Backbone.js Railsで使えるGem

RailsでこんにちはBackbone.Marionette

投稿日:

自分の中でmarionette熱がだんだんと高まりつつあり、特徴的なItemView、CollectionView、CompositeViewをみてみた

詳細は次のビデオが詳しかった

Gemfile

generate

application.js

backbone-on-rails

 

collection, model, router

 

 

このあたりは、 Rails3.2とBackbone.jsでToDoアプリを作ってみた~backbone-on-railsを参考に

ItemView

github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.itemview.md

とりあえず、ArticlesIndexをItemViewにしてみる

routerでmodelを渡してみる

すると、テンプレートで自動でシリアライズして、こんな風に変数が使える

もちろんcloseメソッドでゾンビビュー問題にも対応してるぽい

細かいことはソースをみてみるとよく分かるかも ItemViewは1426行目から(version1.5.1時)

そのほか

  • ItemViewにCollectionを渡した場合、テンプレートにitemsとして渡される
  • uiエレメントを名付けることができる→BindUIElements
  • ItemViewの生成、消滅で、render、closeというイベントが起きて、また、onRender、onCloseというメソッドも定義できる
  • また、before:render、before:closeというイベントもあり、onBeforeRender、onBeforeCloseというメソッドも定義できる
  • Model,Collectionの変化を監視することもできて、modelEvents、collectionEventsで設定できる

CollectionView

github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md

CollectionViewはModelに対するCollectionに似ている

CollectionViewはitemViewにItemViewを定義してやることで、collectionを渡してやればItemViewを連続で描画してくれる

ここで注意するのが、CollectionViewを読み込む前に、ItemViewが定義されていないといけないこと

Backbone on railsというかsprocketでabc順に読み込んでいるらしく、ItemViewのファイル名がCollectionViewのファイル名より先でないとNoItemViewエラーが出た(そしてハマった)

  • itemViewOptionsでItemViewにいろいろ渡すことができる.ItemViewではoptionsとして使える
  • emptyViewエレメントでcollectionが空だった場合の表示を指定できる
  • Viewの生成・消滅・変更の際のイベント発生とコールバック
  • itemEventsで子のItemViewに変更があった場合を監視できる
  • appendHTML
  • 渡したcollectionを監視していて、collectionにaddしたらItemView追加、removeしたらItemView削除、resetしたら再描画してくれる

 

CollectionViewはソースの1498行目から

CompositeView

github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.compositeview.md

CompositeViewはCollectionViewを継承している

さらにテンプレートが使える(テンプレートを指定しないとエラー)

こんなテンプレート

で、こんな出力

tbodyがどこから来たのかよくわからない

CompositeViewはソースの1836行目から

-Backbone.js, Railsで使えるGem
-,

執筆者:

関連記事

Rails3.2で位置情報を日本語表示の住所に変換する~geocoder

ついにブログ記事が100件突破した! そのうちメニュー項目などをわかりやすく構成し直したいと思う いまはRailsのプログラムが楽しくて仕方ない時期なので色々と試して書き溜めたいと思う EverNot …

Rails3.2でHTML5で取得した位置情報をMongoDBに保存してGoogleMapsでみる~mongoid、gmaps4rails

前提 Rails3.2でhtml5で取得した位置情報をAjaxで住所表示する~geocoder 目次1 Mongoid2 スケルトンを作る3 Gmap4railsのインストール4 とりあえず地図を表示 …

Rails5でコントローラーの記述を省略~inherited_resources

By: Simon Matzinger – CC BY 2.0 目次1 inherited_resources2 Gemfile3 使い方 inherited_resources inhe …

no image

Rails4とPostreSQL9.3で全文検索〜pg_bigm

目次1 準備2 migration3  使い方 準備 エクステンションを導入しておく Ubuntu Server12.04でPostgreSQL9.3をつかう〜pg_bigmで全文検索 migrati …

多対多の関係でまだ関連を持っていない候補を探す〜active_record、pluck、not in

By: Kevin Dooley – CC BY 2.0 目次1 前提2 やりたいこと3 解4 解説 前提 PersonとProjectは、ProjectsPersonという中間モデル(テ …