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

執筆者:

関連記事

Backbone.jsとjQuery Mobileを一緒に使うためのリンクメモ

  By: Rick Turoczy jQuery Mobileの公式から jQuery Mobile, Backbone.js and Require.js 一例だけどエレガントなのはjQ …

Rails4.2で簡単にマテリアルデザインを使えるmatelializeを試してみた〜matelialize

By: Basheer Tome – CC BY 2.0 目次1 マテリアルデザイン2 matelialize3 Gemfile4 application.scss5 applicatio …

Rails3.2でJasmineをつかってCoffeeScriptをテスト~jasminerice

    #261 Testing JavaScript with Jasmine (revised)   addyosmani.github.com/backbone-f

Rails3.2とBackbone.jsでサーバーサイドのソーティング

By: Haldane Martin – CC BY 2.0   Rails3.2とBackbone.jsでサーバーサイドのフィルタリング 次はソートを実装したい 目次1 サーバ …

backbone-railsのscaffoldで生成されるコードでルーティングとCRUDの処理をどうやってるのか読んでみた

By: asobi tsuchiya   目次1 はじめに2 サンプルの準備3 初期化4 ルーター5 READ6 CREATE7 UPDATE8 DELETE はじめに backbone-r …