-
-
Save oldfartdeveloper/3956644 to your computer and use it in GitHub Desktop.
rails gem file for opal_test
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# create app | |
rails new opal_test | |
# add to Gemfile below ruby | |
gem 'haml' | |
gem 'haml-rails' | |
gem 'opal-rails' | |
# generate controller w index action | |
rails g controller test index | |
# run rails | |
rails s -p 4001 # or port of your choice | |
# view the link | |
http://localhost:4001/test/index | |
# rename coffeescript file | |
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 . | |
# edit file and call your 1st javascript | |
`alert("hello world")` | |
# wrap that with a ruby method, replace with | |
def alert(msg) | |
`alert(#{msg})` | |
end | |
alert("hello world 2") | |
# put the alert in a Document.ready? | |
Document.ready? do | |
alert("hello world 2") | |
end | |
# add id to header and paragraph | |
%h1#header Test#index | |
%p#paragraph Find me in app/views/test/index.html.haml | |
# add a class, some jQuery and call it in Document.ready? | |
class Test | |
def show_alert | |
alert("I'm alerted") | |
end | |
end | |
Document.ready? do | |
#alert("hello world 2") | |
Document["#paragraph"].on :click do | |
t = Test.new | |
t.show_alert | |
end | |
end | |
# change header text | |
%h1#header Change Text | |
# add another jQuery method and change it | |
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 | |
# call opal directly from haml | |
:opal | |
Document.ready? do | |
alert("called from haml") | |
end | |
# 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 at will | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment