JS for Rails developers

JS for Rails developers
Timur Vaﬁn

Стандарт Google

• lowerCamelCase


• lowerCamelCase
• 2 пробела


• lowerCamelCase
• 2 пробела
• http://google-styleguide.googlecode.com

# view
<%= form_for Comment.new, :remote => true do |form| %>

# controller
def create
@comment = @post.comments.create(params[:commnet])
end

# create.js.erb
$('comments.new').before('<%=j render @comment %>');
$('comments.new').val('');

<a href="#" onclick="alert('Hello world!'); return false;">
Click Here
</a>

<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>

<a href="#" id="alert" data-message="Hello from UJS">
Click Here
</a>

Click Here
</a>

<a href="/posts/8" data-confirm="Are you sure?" data-method="delete">
Destroy
</a>

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">

<% 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 %>

<%= div_for(@person, :class => "foo") %>

<div id="person_123" class="person foo">



<%= content_tag_for(:li, @person) do %>

<li id="person_123" class="person">



<%= 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"

var js = {
namespace1: {
function1: function() {
alert('Call me!');
}
}
}

JQuery UI Plugin

• опции по умолчанию

JQuery UI Plugin

• приватные и публичные методы

JQuery UI Plugin

• приватные и публичные методы
• конструктор и деструктор

$(document).ready ->
$('form[data-autosubmit=true]').autoSubmit()


js =
namespace:
test: ->
alert 'test'

js.namespace.test();


js =
namespace:
test: ->
alert 'test'

js.namespace.test();

$('comments.new').before '<%=j render @comment %>'
$('comments.new').val ''

//= require jquery
//= require my_super_plugin

# my_super_plugin
//= require validation
//= require defaults

JS for Rails developers

More Related Content

What's hot (20)

Viewers also liked (9)

JS for Rails developers

Editor's Notes