Backbone.js Railsで使えるGem RubyOnRails

Rails3.2とBackbone.jsでToDoアプリを作ってみた~backbone-on-rails

投稿日:

 

公式 backbonejs.org/

Backbone ドキュメント日本語訳 github.com/enja-oss/Backbone

イントロダクション github.com/enja-oss/Backbone/blob/master/docs/Introduction.md

なぜ他のフレームワークでなく、Backboneを使うのか?

Backbone.jsは、クライアントサイドのMVCフレームワークといわれる.

Railsとの相性はよくて、Model.save()、Model.create()、Model.destroy()など好きなタイミングで簡単にデータをやり取りできる.

 

参考にしたサイト

Backbone on Rails Part 1 pro

Backbone on Rails Part 2 pro

PHP/jQueryで作るToDoアプリ (全20回)

日本語リファレンス

ando19721226.github.com/Backbone/

日本語コメント付きソース(バージョンはちょっと古い)

github.com/enja-oss/Backbone/blob/master/backbone.js

Backbone.jsを使うときに参考になるリソース 2012年末版 (Backbone Advent Calendar 2012 25th day)

havelog.ayumusato.com/develop/javascript/e544-backbone_learning_resources.html

日本語テキスト

github.com/honmaaax/Haraochi.js/tree/master/texts/Backbone.js

オライリー本無料

Developing Backbone.js Applications

 

CoffeeScriptのクラスのまとめ

backbone-on-railsはbackbone.jsの機能とCoffeeScriptのクラスをうまく組み合わせて使っているのでCoffeeScriptのクラスを簡単に理解しておくといい

クラスclass クラス名 *クラス名は大文字から始める
インスタンスインスタンス名 = new クラス名 *インスタンス名は小文字から始める
プロパティプロパティ名: 値
クラスのプロパティを後から操作クラス::新しいプロパティ = 値
メソッドメソッド名: (引数) ->
処理…
コンストラクタconstructor: (引数) -> *特別なメソッドでインスタンス生成時に実行される
this@~ 

*とてもややこしい

1: ふつうにメソッドのなかで使われる場合、そのインスタンスを指す

2: 引数に@を使う場合、暗黙的に@変数 = 変数と評価する

3: @プロパティ名: staticな変数みたいにクラスから使える

privateなプロパティ・関数= クラス内やメソッド内で定義した場合はprivateとして扱われる

 

@がたくさんでてくるので混乱する

 

JavaScriptのthisの覚え方

不審に思ったらconsoleで出してみる

 

Railsの準備

view用のコントローラーを作っておく

routes.rb

単純なscaffoldを作っておく(基本的にjsonでやり取りする)

データも2,3個つくっておく

backbone-on-railsのインストール

github.com/meleyal/backbone-on-rails

bacbone-railsというgemもある

How is this gem different to backbone rails?

 

Gemfile

bundle

scaffold

できたファイルはこんな感じ

Railsアプリ名.js.coffeeはjavascriptアプリの起動、collections、modelsがモデル、routersがアドレスに応じて分類するコントローラーのような役割、そして、viewsがイベントと処理を設定したりテンプレートから描画したりというのがだいたいの役割分担

ecoはerbに似たCoffeeScriptから使うテンプレートエンジン

github.com/sstephenson/eco

Hello World

 

  1. アプリ名.js.coffeeからRoutersを起動
  2. RoutersからViewsを起動
  3. Viewsからテンプレートを読み込んで書き換える

 

アプリ名.js.coffeeからroutersを起動

RailsのCoffeeScriptは各ファイルを().call(this)でラッピングするので、他のファイルからクラスや関数を使えないけど、ここではwindow直下に命名することでほかのファイルからアクセスできるようにしている

Backbone.history.start()は次のRouterのマッチをするらしくて、これを書かないとRoutersが動かなかった

最後にドキュメントを読み込んだ段階で上のオブジェクトのinitialize()関数を実行する

routersからviewsを起動

routesでマッチャーを書いて、メソッドを実行する

普通はViewsを指定するみたい.

ここにでてくるviewをつくって、指定の場所にくっつけるというイディオムはこの後何度もでてくる.

Backbone.Router

このマッチャ―は基本的にアドレスの先頭に#がついている必要がある

ルーティングの例は次のページが参考になる

A basic Rails and Backbone.js example

 

Viewsからテンプレートを読み込んで書き換える

viewのrender()メソッドは空なので定義しないといけない.

view.render().elはイディオム的な書き方なので、render()の返り値に気を使って、メソッドチェインができるように定義する.

elはelementの略らしく、Viewsでhtml要素を返すようにする.DOM要素を保持するためのプロパティ.

 

Backbone.View

 

templateはecoテンプレートの場所を指定する.Viewsとテンプレートはセットで使うみたい.

ここでは@elをjQueryオブジェクトとしてtemplateの内容を持たせている.

とりあえずindex.jst.ecoテンプレートになにか書き込んでみる

ecoテンプレートに書いておけばBodyを書き換えてくれる

また、railsのrenderのようにハッシュでローカル変数を指定できる

rener()の返り値にthisを指定するのはメソッドチェインをするためと思う.

データベースからデータを読み込んでテンプレートで表示する

モデルのコレクションに読み込むアドレスを指定する

Backbone.Collection

 

データはJSONで読み込むので.jsonをつけなくてOK

RailsのscaffoldではJSONの読み書きも対応している

サーバとデータをやり取りするBackbone.syncはデフォルトでRailsのRESTに対応している

Backbone.Sync

 

ここではRoutersからデータの配列を読み込んでViewsに渡す

fetchメソッドはサーバから取得したデータでモデルの状態をリセットする

Backbone.Model

 

Viewsはパーシャルみたいなこともできる

処理が非同期に実行されるので、データを読み込むのを待たずにrender()を実行してしまう

それを避けるためにresetイベントで書きなおす(一番最初に@collectionをみてリセットされたらrender()を実行)

イベントの一覧

 

第三引数はメソッドチェインをするためだと思われる

 

thisの内容を保持するためだった

thisを束縛する

 

indexに対応するViewsのテンプレートに#tasksというidをもったulを作っておく

つぎに新しく個別のデータ用のViewsとテンプレートを作る

task.js.coffee

tagNameを指定しないとdivで囲んでしまう

task.jst.eco

 

データを追加してデータベースに書き込む

indexのテンプレートにタスク追加のためのフォームを作る

submitにイベントを設定して押されたら、データをデータベースに書き込む

そして、データが新しく追加されたら、さっきつくった@appendTasksメソッドでデータ表示を追加する

また、追加したテキストフォームを空にする

 

データを更新する

テンプレートを書きなおしてチェックボックスを表示する

チェックボックスにイベントを追加する

eachでCollectionから取り出した要素もModelとしてsaveができる

ブラウザを再起動してもチェックボックスの状態が保存されていることを確認する

ついでに文字列をダブルクリックすると編集できるようにする

新しくエディットフォーム用のViewとテンプレートをつくる

edit_form.js.coffee

formからフォーカスを外れたとき(blur)に、その内容でデータベースをアップデートする

フォームをもとの文字列に戻す処理が必要だけど、taskのviewからrenderメソッドをつかって書きなおした方がうまくいった

Events:イベント

www.jquerystudy.info/reference/events/index.html

どんなイベントが設定されているか一目で分かる「Visual Event」

 

 

「viewオブジェクトをつくって、指定の場所にjQueryでくっつける」というイディオムのおかげで、上位部品は下位部品の場所を指定する役割、下位部品はモデルの変数をつかった自身のコンテンツと自身に対するイベントを設定するという役割、とViewクラスの役割分担がきれいにできる

jQueryのところをd3.jsにして試してみたい

stackoverflow.com/questions/11023852/rendering-in-backbone-js-using-d3-js-and-svgs

stackoverflow.com/questions/9651167/svg-not-rendering-properly-as-a-backbone-view

github.com/mhansen/stolen-cars

 

ソース

github.com/seventhsense/backbone_todo

よりかっこいいToDoのデモとそのソース

todomvc.com/

github.com/addyosmani/todomvc/tree/gh-pages/architecture-examples/backbone/js

kadoppe.com/archives/2012/03/jasmine-sinon-js-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6-backbone-js-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%83%86%E3%82%B9%E3%83%88%E3%81%99%E3%82%8B.html

 

 

ダブルクリックするとinput要素になるp要素を作る

 

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

執筆者:

関連記事

no image

Mongoidで地理情報インデックスを使おうとしたけどうまくいかない

試したgem mongoid_geo mongoid_geospatial 試してないgem mongoid_spacial

Rails4でフォーム要素を動的に追加したり削除したり〜nested_form

目次1 参考2 前提の環境3 Gemfile4 View5 Controller6 できた7 パーシャル化8 フォームを追加する場所を指定する9 一対一の場合10 そのほか11 番外編: 1つのモデル …

Rails3でテストカバレッジを計測する~simplecov,thin

    rspecなどのテストでテストがどの程度カバーしているのかを簡単に計測するsinplecovというgemをいれた 目次1 Gemfile & bundle2 spe …

文字をダブルクリックしてそのままフォーム編集するやつのメモ~in place edit

By: the Italian voice 目次1 Best in place2 Mercury editor3 create.js4 スクラッチで5 X-editable Best in place …

no image

RubyでDocxを分解してみた~Nokogiri::XML::SAX

    参照 Rubyでdocxをいろいろ分析してみた 今度はsaxのアプローチでdocxのword/document.xmlを分解してみた 使い方は、Nokogiri::XML: …