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

執筆者:

関連記事

no image

Railsで動画を管理する2 動画のサムネイルを作成する~CarrierWave + Flowplayer

  *とりあえず動いているけど、もっとましな方法があるとおもいます 前提 Railsで動画ファイルを管理する~CarrierWave Flowplayer 参考 Rubyでffmpegのラッ …

Rails3.2+jQueryUI1.10でjQuery-UI-Bootstrapのデモ画面を出すところまでやった

なにかいつの間にかかっこいい感じのサイトになってた addyosmani.github.com/jquery-ui-bootstrap/ jquery-ui-bootstrap.github.io/j …

WindowsのRubyでxlsxファイルにアクセスする~roo

By: Hajime NAKANO – CC BY 2.0 目次1 rooのインストール2 rooを使ってみる(基本)3 シートを指定する4 セルの値を確認する5 行列を数える rooのイ …

no image

kaminari + Twitter Bootstrap2テーマでFirst,Prev,Next,Lastだけおかしい場合

前につくったTwitter Bootstrap2用のkaminariテーマをコピーして使おうとしたら表題の通り、First,Prev,Next,Lastがおかしい あと…も表示されない G …

Rails4.1で全文検索〜rroonga

By: Vinoth Chandar – CC BY 2.0 目次1 RailsでGroongaを使う選択肢2 サンプルのアプリ3 Gemfile4 データベースへの接続5 スキーマの設定 …