rails gem file for opal_test - used in OCRuby presentation on opal 10/25/2012

gistfile1.rb

# prerequisites: Ruby 1.9.3, Rails 3.2.something recent

###
### Setup rails app w/haml and opal
###

# create app
rails new opal_test

# add to Gemfile below rails
gem 'haml'
gem 'haml-rails'
gem 'opal-rails'

# run bundle

# generate controller w index action

rails g controller test index

# rename coffeescript file, I'll probably try and update opal-rails to generate these

mv app/assets/javascripts/test.js.coffee app/assets/javascripts/test.js.rb

# add opal js to application.js by replacing 

//= require jquery
//= require jquery_ujs
//= require_tree .

# with the below.  Order matters

//= require opal
//= require jquery
//= require jquery_ujs
//= require opal-jquery
//= require_tree .

# run rails
rails s -p 4001 # or port of your choice

# view the link
http://localhost:4001/test/index

###
### Hello World, ruby x string to call js
###

# edit app/assets/javascripts/test.js.rb  and call your 1st javascript via x string
`alert("hello world")`

# refresh page and see alert

###
### Wrap javascript in ruby method
###

# wrap the x string with a ruby method, replace code in app/assets/javascripts/test.js.rb with

def alert(msg)
`alert(#{msg})`
end

alert("hello world 2 - wrapped in opal")

# refresh page and see new alert

###
### Document.ready?
###

# change the alert() call by putting it in a in a Document.ready? Change text to make sure it worked

Document.ready? do 
  alert("hello world 3 called from Document.ready?")
end

# refresh page and see new alert

###
### Simple jQuery examples and using a Ruby class
###

# add id to header and paragraph and change paragraph text in app/views/test/index.html.haml for jQuery access

%h1#header Test#index
%p#paragraph Send Alert

# add a class with a show_alert() method, add a jQuery on click and call it in Document.ready?

class Test
  def show_alert
    alert("I'm alerted from click calling Opal class instance method")
  end
end

Document.ready? do 
  #alert("hello world 2")
  
  Document["#paragraph"].on :click do  
    t = Test.new
    t.show_alert
  end
end
# refresh browser, click on paragraph

# change header text to show what it will do

%h1#header Change Text

# add another jQuery using method and hook it in to the header via on click

class Test
  def show_alert
    alert("I'm alerted")
  end

  def change_text
    Document["#paragraph"].html = "I <b>changed</b>"
  end
end

Document.ready? do 
  #alert("hello world 2")
  
  Document["#paragraph"].on :click do  
    t = Test.new
    t.show_alert
  end

  Document["#header"].on :click do
    t = Test.new
    t.change_text
  end
  
end

# refresh and click on the header

###
### opal filter in haml view
###

# add an opal filter to call opal directly from haml at the bottom of

:opal
  Document.ready? do
    alert("called from haml")
  end

# refresh browser, see alert

###
### Specs, opal-rspec
###

# add specs to application.js
// = require_tree ./spec

# and then a spec folder with you specs!
mkdir app/assets/javascripts/spec

# assets/javascripts/spec/example_spec.js.rb

describe 'a spec' do
  it 'has successful examples' do
    'I run'.should =~ /run/
  end
end

# load /opal_spec click on link to example_spec.js.rb to see run