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

執筆者:

関連記事

ElasticSearchをRubyから使う~elasticsearch-ruby

By: Harry Rose – CC BY 2.0 目次1 gem elasticsearch-ruby2 環境3 インスタンス作成4 メソッド一覧5 情報取得6 ドキュメントの作成7 …

Rails3.2からMongoDBを使ってアプリをつくってみる~mongoid

MongoDBはとても素直で扱いやすいということがわかってきたので、以前作成した郵便番号・住所の相互検索アプリをまたつくってみた 参照 MongoDBのチュートリアルをこなす KEN_ALL.CSVを …

市場テクニカル分析ライブラリta-libとruby用のラッパーruby-talibをインストールする

By: Ponzi_Unit – CC BY 2.0 目次1 ta-lib2 talib_ruby ta-lib ta-libは市場のテクニカル分析用のライブラリ集. macであればHom …

no image

Rails3.2でユーザー権限を細かく設定~Devise + cancan

      参考 cancan でモテカワ♥愛され権限管理 How To: Integrate with CanCan for roles management &nbs …

Rails3.2とBackbone.jsでGoogle CalendarライクなカレンダーにCRUD~fullcalendar-rails

目次1 前回2 READ ~データベースからイベントを読み込んでカレンダーに表示する3 CREATE~カレンダーからイベントを登録する4 UPDATE1~カレンダーのイベントをクリックしてイベントを編 …