JS for Rails developers

730 views

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
730
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • JS for Rails developers

    1. 1. JS for Rails developers Timur Vafin
    2. 2. Стандарт Google
    3. 3. Стандарт Google• lowerCamelCase
    4. 4. Стандарт Google• lowerCamelCase• 2 пробела
    5. 5. Стандарт Google• lowerCamelCase• 2 пробела• http://google-styleguide.googlecode.com
    6. 6. JSON vs. JS
    7. 7. # view<%= form_for Comment.new, :remote => true do |form| %># controllerdef create @comment = @post.comments.create(params[:commnet])end# create.js.erb$(comments.new).before(<%=j render @comment %>);$(comments.new).val();
    8. 8. <3<3<3<3<3
    9. 9. Unobtrusive JavaScript
    10. 10. <a href="#" onclick="alert(Hello world!); return false;"> Click Here</a>
    11. 11. <a href="#" onclick="alert(Hello world!); return false;"> Click Here</a><script type="text/javascript"charset="UTF-8"> $(function () { $(#alert).click(function () { alert(this.data(message)); return false; }) });</script><a href="#" id="alert" data-message="Hello from UJS">Click Here</a>
    12. 12. WTF?
    13. 13. <a href="#" id="alert" data-message="Hello from UJS"> Click Here</a>
    14. 14. <a href="#" id="alert" data-message="Hello from UJS"> Click Here</a><a href="/posts/8" data-confirm="Are you sure?" data-method="delete"> Destroy</a>
    15. 15. <a href="#" id="alert" data-message="Hello from UJS"> Click Here</a><a href="/posts/8" data-confirm="Are you sure?" data-method="delete"> Destroy</a><form action="/products" data-remote="true" method="get">
    16. 16. <% content_for :head do %> <%= javascript_include_tag my_super_plugin %> <script type="text/javascript" charset="UTF-8"> $(document).ready(function() { $(form[data-autosubmit=true]).autoSubmit(); }) </script><% end %><%= yield :head %>
    17. 17. <%= div_for(@person, :class => "foo") %><div id="person_123" class="person foo">
    18. 18. <%= div_for(@person, :class => "foo") %><div id="person_123" class="person foo"><%= content_tag_for(:li, @person) do %><li id="person_123" class="person">
    19. 19. <%= div_for(@person, :class => "foo") %><div id="person_123" class="person foo"><%= content_tag_for(:li, @person) do %><li id="person_123" class="person">dom_id(Post.find(45)) # => "post_45"dom_id(Post.new) # => "new_post"dom_id(Post.find(45), :edit) # => "edit_post_45"dom_class(post) # => "post"dom_class(Person) # => "person"
    20. 20. Модульность
    21. 21. var js = { namespace1: { function1: function() { alert(Call me!); } }}
    22. 22. JQuery UI Plugin
    23. 23. JQuery UI Plugin• опции по умолчанию
    24. 24. JQuery UI Plugin• опции по умолчанию• приватные и публичные методы
    25. 25. JQuery UI Plugin• опции по умолчанию• приватные и публичные методы• конструктор и деструктор
    26. 26. $(document).ready -> $(form[data-autosubmit=true]).autoSubmit()
    27. 27. $(document).ready -> $(form[data-autosubmit=true]).autoSubmit()js = namespace: test: -> alert testjs.namespace.test();
    28. 28. $(document).ready -> $(form[data-autosubmit=true]).autoSubmit()js = namespace: test: -> alert testjs.namespace.test();$(comments.new).before <%=j render @comment %>$(comments.new).val
    29. 29. //= require jquery//= require my_super_plugin# my_super_plugin//= require validation//= require defaults
    30. 30. PJAX

    ×