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

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

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

テキストマイニングの初歩 Rubyで形態素解析を行う〜ruby-mecab

By: Cracker Jack – CC BY 2.0 環境 ubuntu server 12.04 英語は単語を空白で区切るのでコンピュータでの解析に向いているが、日本語は助詞などを続 …

no image

Ubuntu Server 12.04で動画のサムネイルを作成~avconv ffmpeg

  目次1 インストール2 動画の情報3 使えるフォーマットの一覧4 サムネイル画像の作成 インストール

総合的な動画の変換 …

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

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

MIddlemanでrails-assets.orgをつかってbowerのコンポーネントをつかう

By: Simon Cunningham – CC BY 2.0 middlemanは静的なサイトのジェネレータ rails-assets.orgは「the frictionless pr …