7. Data to JS:
data-attr example
controller
# home_controller.rb
def index
# some logic
@products = counted_products_collection
end
Saturday, June 8, 13
8. Data to JS:
data-attr example
view
# views/home/index.html.erb
... some content
<%= contant_tag “div”, id: “products”, data:
{ products: @products } do %>
Loading products...
<% end %>
Saturday, June 8, 13
9. Data to JS:
data-attr example
JS
# assets/javascripts/pages/home.js.coffee
jQuery ->
doSomething $(‘#products’).data(‘products’)
Saturday, June 8, 13
14. Data to JS
GON
Views step - once (perfect - in layout)
Don’t have to think about escaping
Stored uniq data per request
Saturday, June 8, 13
15. Data to JS:
GON example
controller
# home_controller.rb
def index
# some logic
gon.products = counted_collection
gon.products_url = products_url
end
Saturday, June 8, 13
16. Data to JS:
GON example
view
# views/layouts/layout.html.erb
<head>
<%= include_gon(options) %>
... your js, css etc
Saturday, June 8, 13
17. Data to JS:
GON example
JS
# assets/javascripts/pages/home.js.coffee
jQuery ->
doSomething gon.products
Saturday, June 8, 13
18. Usual ways: cons
Escaping ( “</script><script>evil()</
script>”)
Excess lines in your views
Search for tag and parse attributes
Views step
Saturday, June 8, 13
19. GON: pros
Automatically escape and transform
to_json all data
What you write in action – you’ll get in JS
Should modify views once
Saturday, June 8, 13
20. GON. Next versions
Generate json with template engines
Share data between requests
Renew data in JS gon easy way
Saturday, June 8, 13
22. GON, RABL and
jBuilder
why so cool?
All power of RABL and jBuilder
Clean your controller new way
Render multiple templates with GON
Saturday, June 8, 13
23. GON and RABL
multi templates
# home_controller.rb
def index
gon.rabl ‘path_to_temlpate1’, as: ‘posts’
gon.rabl ‘path_to_template2’, as: ‘users’
gon.rabl ‘path_to_template3’, as: ‘admins’
gon.rabl # app/views/home/index.rabl
end
Saturday, June 8, 13
26. GON Global
Share data application-wide
Initial data
Change settings everywhere by event
Saturday, June 8, 13
27. GON Global
init data example
# config/initializers/gon.rb
Gon.global.pictures_per_user = 4
# app/assets/javascripts/imageboard.js.coffee
setLimitToUser = gon.global.pictures_per_request
Saturday, June 8, 13
28. GON Global
change data example
# app/model/user.rb
after_save :change_users_limit
def change_users_limit
if User.count > 1000
Gon.global.pictures_per_request = 3
end
end
Saturday, June 8, 13
29. GON watch
Renew data for variable
No excess LOC
Use current state of action
Saturday, June 8, 13
30. GON watch:
how it works
# home_controller.rb
def index
num = User.count * factor + params[:some].to_i
gon.watch.pictures_per_request = num
gon.watch.other_num = num * factor2
end
Saturday, June 8, 13
31. GON watch:
how it works
# layout.html.erb
<head>
<%= include_gon(watch: true) %>
...
Saturday, June 8, 13
32. GON watch:
how it works
# home_index.js.coffee
renewLimit = (count) ->
$(‘#limit-counter’).text(count)
gon.watch(‘pictures_per_request’, interval: 1000,
renewLimit)
Saturday, June 8, 13
