Opal in a Rails application
Add Opal to your Gemfile:
gem 'opal-rails'
Or to start off with Opal when you build your new Rails app:
rails new <app-name> --javascript=opal
Basic usage through the asset pipeline
// app/assets/application.js.rb
//= require opal
//= require opal_ujs
//= require turbolinks
//= require_tree .
Opal requires are forwarded to the Asset Pipeline at compile time (similarly to what happens for RubyMotion). You can use either the .rb or .opal extension:
# app/assets/javascripts/greeter.js.rb
puts "G'day world!" # check the console!
# Dom manipulation
require 'opal-jquery'
Document.ready? do
Element.find('body > header').html = '<h1>Hi there!</h1>'
end
As a template
You can use it for your views too, it even inherits instance and local variables from actions:
# app/controllers/posts_controller.rb
def create
@post = Post.create!(params[:post])
render type: :js, locals: {comments_html: render_to_string(@post.comments)}
end
Each assign is filtered through JSON so it's reduced to basic types:
# app/views/posts/create.js.opal
post = Element.find('.post')
post.find('.title').html = @post[:title]
post.find('.body').html = @post[:body]
post.find('.comments').html = comments_html
As a Haml filter (optional)
Of course you need to require haml-rails separately since its presence is not assumed
-# app/views/posts/show.html.haml
%article.post
%h1.title= post.title
.body= post.body
%a#show-comments Display Comments!
.comments(style="display:none;")
- post.comments.each do |comment|
.comment= comment.body
:opal
Document.ready? do
Element.find('#show-comments').on :click do |click|
click.prevent_default
click.current_target.hide
Element.find('.comments').effect(:fade_in)
end
end
Spec!
Add specs into app/assets/javascripts/spec:
and then a spec folder with you specs!
# app/assets/javascripts/spec/example_spec.js.rb
describe 'a spec' do
it 'has successful examples' do
'I run'.should =~ /run/
end
end
Then visit /opal_spec from your app and reload at will.
