Rails 4 のプロジェクトで View部分の DOM 操作用途で Backbone.js を試してみようと思い、どうせならと、ちょっと気になってた Rails Assets を利用してみました。メモがてら、ここに試した手順を残しておきます。
ちなみに Rails Assets を使うと、本来は Bower で管理されているパッケージを、gem として管理できるようです。
今回の環境
- ローカルの Mac に 構築した Rails 環境に導入しています。
- OS：
Mac OS X 10.9.4 (Mavericks) - Ruby：
2.1.2 - Rails：
4.1.1
- OS：
導入手順
まず、Rails Assets のサイトを見ると、次のように gem を指定する、とあります。
gem 'rails-assets-BOWER_PACKAGE_NAME'
Bower のサイトを見ると、Backbone.js のパッケージ名は backbone のようなので、Gemfile に次のように追記します。
source 'https://rails-assets.org'
〜
gem 'rails-assets-backbone'
追記したら、bundle install を実行します。
$ bundle install --path vendor/bundle
-
結果：
バージョン 1.1.2 がインストールされたぽい。ついでに Underscore.js も。
次に、application.js に次の2行を追記します。
//= require underscore
//= require backbone
いったん、ここで動作確認。ローカルWEBサーバを起動します。
$ ./bin/rails s
とりあえず、エラーは出てないらしい。
画面をつくって動作確認するために、適当に Scaffold します。
$ ./bin/rails g scaffold Hoge name:string age:integer
$ ./bin/rake db:migrate
ローカルWEBサーバを起動しなおし、ブラウザで http://localhost:3000/hoges にアクセスしてみます。エラーは出てなさそう。
indexページの JavaScript ファイルは app/assets/javascripts/hoges.js.coffee なので、ここに Backbone.js のスクリプトを次のように書きます。
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
obj = new Backbone.Model()
obj.set name: "Hoge"
console.log "obj.name: " + obj.get("name")
ローカルWEBサーバを起動しなおし、ブラウザで http://localhost:3000/hoges にアクセスしてみます。
動いてるみたいです^^
おわりに
同じようにして、AngularJS と Vue.js も導入できたのですが、Knockout.js はアセットパイプラインのパスのエラーが出て、上手くいきませんでした..