javascript 在 Rails 3 中处理 js.erb 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8496819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Handling js.erb files in Rails 3
提问by JimmyBandit
I am converting a standard scaffold generated application to use AJAX and JQuery in a similar manner to that specified in http://stjhimy.com/posts/07-creating-a-100-ajax-crud-using-rails-3-and-unobtrusive-javascript.
我正在将标准脚手架生成的应用程序转换为以类似于http://stjhimy.com/posts/07-creating-a-100-ajax-crud-using-rails-3-and中指定的方式使用 AJAX 和 JQuery -unobtrusive-javascript。
I followed all the instructions :
我遵循了所有说明：
- Creating a composite Index view using 2 partials;
- Updated the Controller,only retaining Index, Create, Edit,Update and Destroy actions;
- created js.erb files for the Create, edit, update and destroy actions that use JQuery functions to update the DOM.
- 使用 2 个局部创建一个复合索引视图；
- 更新了控制器，只保留了索引、创建、编辑、更新和销毁动作；
- 为使用 JQuery 函数更新 DOM 的创建、编辑、更新和销毁操作创建了 js.erb 文件。
Can't seem to access the js.erb files at all. Put the js.erb in the with the view files , for example app/views/customers/create.js.erb
似乎根本无法访问 js.erb 文件。将 js.erb 放在视图文件中，例如app/views/customers/create.js.erb
The code for the create.js.erb is :
create.js.erb 的代码是：
<% if @customer.errors.any? -%>
/*Hide the Flash Notice div*/
$("#flash_notice").hide(300);
/*Update the html of the div customer_errors with the new one*/
$("#customer_errors").html("<% @customer.errors.full_message.each do |msg| %>
<li><%= msg %></li>
<% end %>");
/*Show the div customer_errors*/
$("#cust0mer_errors").show(300);
<% else -%>
/*Hide the div customer_errors*/
$("#customer_errors").hide(300);
/*Update the html of the div flash_notice with the new one */
$("#flash_notice").html("<%= flash[:notice] %>");
/*Show the flash_notice div*/
$("#flash_notice").show(300);
/*Clear the entire form*/
$(":input:not(input[type=submit])").val("");
/*Replace the html of the div posts_list with the updated new one*/
$("#customers_list").html("<%= render "customers" %>";
<% end %>
The code for the forms is below:
表格代码如下：
The index.html.erb file
index.html.erb 文件
<div id="customer_form"><%= render 'form' %></div>
<div id="customers_list"><%= render 'customers' %></div>
The _form.html,erb partial file
_form.html,erb 部分文件
<%= form_for(@customer, :remote => true) do |f| %>
<div id="customer_errors" style="display:none"></div>
<div class="field">
<%= f.label :firstname %>
<%= f.text_field :firstname %>
<%= f.label :lastname %>
<%= f.text_field :lastname %>
</div>
<div class="field">
<%= f.label :email %>
<%= f.text_field :email %>
<%= f.label :phone %>
<%= f.text_field :phone %>
</div>
<div class="field">
<%= f.label :password %>
<%= f.text_field :password %>
<%= f.label :address_id %>
<%= f.text_field :address_id %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
The file for the _customers.html.erb partial is:
_customers.html.erb 部分的文件是：
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Phone</th>
<th>Password</th>
<th>Address</th>
<th></th>
<th></th>
<th></th>
</tr>
<% @customers.each do |customer| %>
<tr>
<td><%= customer.firstname %></td>
<td><%= customer.lastname %></td>
<td><%= customer.email %></td>
<td><%= customer.phone %></td>
<td><%= customer.password %></td>
<td><%= customer.address_id %></td>
<td><%= link_to 'Edit', edit_customer_path(customer), :remote => true %></td>
<td><%= link_to 'Destroy', customer, :remote => true, :confirm => 'Are you sure?', :method => :delete %></td>
</tr>
<% end %>
</table>
Edit
编辑
latest version of Customers controller:
最新版本的客户控制器：
class CustomersController < ApplicationController
before_filter :load
def load
@customers = Customer.all
@customer = Customer.new
end
def index
end
def create
@customer = Customer.new(params[:customer])
if @customer.save
flash[:notice] = "Customer was successfully created."
@customers = Customer.all
respond_to do |format|
format.js
end
end
end
def edit
@customer = Customer.find(params[:id])
respond_to do |format|
format.js
end
end
def update
@customer = Customer.find(params[:id])
if @customer.update_attributes(params[:customer])
flash[:notice] = "Customer was successfully updated."
@customers = Customer.all
respond_to do |format|
format.js
end
end
end
def destroy
@customer = Customer.find(params[:id])
@customer.destroy
flash[:notice] = "Customer successfully destroyed"
@customers = Customer.all
respond_to do |format|
format.js
end
end
end
The latest version of layout template has include tags as follows after I chanse the Jquery.js fille to rails.js
我把Jquery.js文件改成rails.js后，最新版的布局模板包含如下标签
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' %>
<%= javascript_include_tag 'rails' %>
<%= csrf_meta_tag %>
Latest logs:
最新日志：
Started GET "/customers" for 127.0.0.1 at Wed Dec 14 21:16:14 +0000 2011
Processing by CustomersController#index as HTML
Customer Load (1.3ms) SELECT "customers".* FROM "customers"
Rendered customers/_form.html.erb (14.1ms)
Rendered customers/_customers.html.erb (28.1ms)
Rendered customers/index.html.erb within layouts/application (47.6ms)
Completed 200 OK in 74ms (Views: 56.3ms | ActiveRecord: 1.3ms)
Started GET "/customers/13/edit" for 127.0.0.1 at Wed Dec 14 21:17:20 +0000 2011
Processing by CustomersController#edit as JS
Parameters: {"id"=>"13"}
Customer Load (1.1ms) SELECT "customers".* FROM "customers"
Customer Load (0.5ms) SELECT "customers".* FROM "customers" WHERE "customers"."id" = 13 LIMIT 1
Rendered customers/_form.html.erb (16.1ms)
Rendered customers/edit.js.erb (17.6ms)
Completed 200 OK in 43ms (Views: 27.6ms | ActiveRecord: 1.5ms)
Started GET "/customers/13/edit" for 127.0.0.1 at Wed Dec 14 21:17:31 +0000 2011
Processing by CustomersController#edit as JS
Parameters: {"id"=>"13"}
Customer Load (1.0ms) SELECT "customers".* FROM "customers"
Customer Load (0.3ms) SELECT "customers".* FROM "customers" WHERE "customers"."id" = 13 LIMIT 1
Rendered customers/_form.html.erb (25.9ms)
Rendered customers/edit.js.erb (28.8ms)
Completed 200 OK in 52ms (Views: 39.0ms | ActiveRecord: 1.3ms)
Started DELETE "/customers/18" for 127.0.0.1 at Wed Dec 14 21:18:31 +0000 2011
Processing by CustomersController#destroy as JS
Parameters: {"id"=>"18"}
Customer Load (1.0ms) SELECT "customers".* FROM "customers"
Customer Load (0.4ms) SELECT "customers".* FROM "customers" WHERE "customers"."id" = 18 LIMIT 1
AREL (0.4ms) DELETE FROM "customers" WHERE "customers"."id" = 18
Customer Load (0.7ms) SELECT "customers".* FROM "customers"
Rendered customers/_customers.html.erb (120.3ms)
Rendered customers/destroy.js.erb (122.1ms)
Completed 200 OK in 198ms (Views: 134.1ms | ActiveRecord: 2.5ms)
Started GET "/customers" for 127.0.0.1 at Wed Dec 14 21:20:00 +0000 2011
Processing by CustomersController#index as HTML
Customer Load (1.6ms) SELECT "customers".* FROM "customers"
Rendered customers/_form.html.erb (19.1ms)
Rendered customers/_customers.html.erb (23.8ms)
Rendered customers/index.html.erb within layouts/application (50.6ms)
Completed 200 OK in 76ms (Views: 54.9ms | ActiveRecord: 1.6m
采纳答案by iwasrobbed
When you create your formand link_toobjects, you need to make sure they have a :remote => trueon them otherwise the route will not render the action via JS. Instead, it will render it with the default HTML.
当你创建你的form和link_to对象时，你需要确保它们上面有一个:remote => true，否则路由将不会通过 JS 呈现动作。相反，它将使用默认 HTML 呈现它。
An example:
一个例子：
<%= form_for(@post, :remote => true) do |f| %>
or
或者
<%= link_to "Edit", edit_post_path(post), :remote => true %>
Also, make sure you have the latest jQuery and jQuery Rails adapter installed: https://github.com/rails/jquery-ujs
另外，请确保您安装了最新的 jQuery 和 jQuery Rails 适配器：https: //github.com/rails/jquery-ujs
As a side note, you don't need format.htmlin your code above if you're doing 100% ajax for the CRUD actions since all you'll ever render are the JS files (format.js).
附带说明一下，format.html如果您对 CRUD 操作执行 100% ajax，则不需要在上面的代码中，因为您将渲染的只是 JS 文件 (format.js)。
Update:I think you are misunderstanding a few things... The tutorial you are reading only talks about changing the CRUD (create, read, update, delete) actions into 100% ajax calls which means they are the only ones that will respond with rendering .js.erbfiles. So when you are checking that the page is Processing SomeController#some_action as JSit will onlyapply to the create, show, update, and destroyactions within your Customers controller.
更新：我认为您误解了一些事情......您正在阅读的教程仅讨论将 CRUD（创建、读取、更新、删除）操作更改为 100% ajax 调用，这意味着它们是唯一会响应的渲染.js.erb文件。所以，当你正在检查该页面Processing SomeController#some_action as JS将只适用于create，show，update，和destroy您的客户控制器内的操作。
For the jQuery and jQuery-UJS install on Rails 3.0, follow these directions:
对于在 Rails 3.0 上安装 jQuery 和 jQuery-UJS，请遵循以下说明：
Be sure to get rid of the rails.js file if it exists, and instead use the new jquery_ujs.js file that gets copied to the public directory. Choose to overwrite jquery_ujs.js if prompted.
确保删除 rails.js 文件（如果存在），而是使用复制到公共目录的新 jquery_ujs.js 文件。如果出现提示，选择覆盖 jquery_ujs.js。
Then run rails generate jquery:install
然后运行 rails generate jquery:install
Change your layout template to this:
将您的布局模板更改为：
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
I have to say, that tutorial you are reading is about the worst tutorial I've ever read. Since you seem to be very new to Ruby on Rails so I would highlyrecommend reading a different tutorial (like this one if you still want to read about AJAX w/ Rails: http://net.tutsplus.com/tutorials/javascript-ajax/using-unobtrusive-javascript-and-ajax-with-rails-3/or even something really good like this one to learn Rails itself better: http://ruby.railstutorial.org/ruby-on-rails-tutorial-book).
我不得不说，你正在阅读的教程是我读过的最糟糕的教程。由于您似乎对 Ruby on Rails 非常陌生，因此我强烈建议您阅读不同的教程（如果您仍然想阅读有关带有 Rails 的 AJAX：http: //net.tutsplus.com/tutorials/javascript- ajax/using-unobtrusive-javascript-and-ajax-with-rails-3/或者甚至是像这样更好地学习 Rails 本身的好东西：http: //ruby.railstutorial.org/ruby-on-rails-tutorial-书）。
