从Prototype迁移到jQuery(适用于新手）

Migrate from Prototype to jQuery (for newbie)

本文关键字：适用于 新手 jQuery Prototype 迁移      更新时间：2023-09-26

我使用的是RubyonRails 3，我想使用jQuery而不是Prototype（这就是我目前使用的）。我读了很多书、指南和教程，但我仍然不明白如何在代码中使用jQuery（也许它让没有人"真正"清楚这一点）。此外，我有很多使用Prototype编写的代码，所以我想同时处理这两个问题，并"逐步"迁移到jQuery。

我在制作<%= javascript_include_tag :defaults, 'jquery' %>的布局文件中包含了jQuery文件，因此<script src="/javascripts/jquery.js?1307515315" type="text/javascript"></script>出现在所有HTML页面的源代码中。为了避免application.js文件中的错误，我在application.js文件中添加了jQuery.noConflict()。现在，我必须做什么

如果我在application.js文件中声明jQuery方法

jQuery(document).ready(function() {
    jQuery('#test_id2').click(function() {
      alert('Handler for .click() called.');
    });
})

我用称之为

<%= link_to 'change1', '#', :id => 'test_id1' %>

它会起作用，但我想把上面的代码放在一个单独的js文件中我该怎么办

控制器操作的JS文件必须如何命名？我必须在哪里（在哪个文件夹中）找到相关的JS文件？如何在控制器中说明respond_to方法

def edit
  ...
  respond_to do |format|
    format.html # render edit.html.erb
    format.js # render... what file?! where?!
  end
end

使用Prototype，我可以直接在视图文件中编写代码，如下所示：

<%= link_to_function( "change", :id => 'test_id2' ) do |page|
  page[:test_id3].toggle
  ...
end %>

如何在视图文件中使用jQuery

你有什么建议吗

更新

在我的edit.js.erb文件中，我有

<%
jQuery(document).ready(function() {
    jQuery('#test_id1').click(function() {
      alert('Handler for .click() called.');
    });
})
%>

在edit.html.erb文件中，我有

<%= link_to 'Test link', '#', :id => 'test_id1' %>

但当我点击上面的链接时，jQuery不起作用（alert方法不会触发）。此外，如果我试图直接在视图文件中插入JavaScript代码，我会得到以下错误：

NameError: undefined local variable or method `document' for #<#<Class:0x00000102aa04d0>:0x00000102a75eb0>

有两件不同的事情。

它们是正则脚本，您可以使用与jquery相同的方式加载：您将它们放在public/javascript目录中，并将它们包含在中

<%= javascript_include_tag YourNameFile %>

请注意，我没有添加.js.javascript_include_tag会为您添加的。

然后您就有了JS模板。这就像你的原型视图。除了你里面有Jquery。所以你以前所做的是有效的！如果您使用

respond_to do |format|
  format.html # render edit.html.erb
  format.js # render edit.js.erb
end

它将渲染edit.js.erb（您可以在与edit.html.erb文件相同的目录中找到它）。

然后，您可以在这些文件中添加jQuery和"ruby"（与原型完全相同）。只需确保加载jQuery即可。

如果我遗漏了什么，请添加评论。：）

===编辑===

在您的Templates中，您必须将<% %>仅放在Rails函数周围！！否则，它应该是Javascript。所以edit.js.erb应该看起来像：

jQuery(document).ready(function() {
    jQuery('#test_id1').click(function() {
      alert('Handler for .click() called.');
    });
})

您的文件应该命名为*.js.erb，并且位于视图文件夹中（就像您的*.html.erb一样），它们的命名应该像您命名*.html.erp文件一样，即edit.js.erb用于编辑操作。您可以在这些文件中编写ruby代码，就像在prototype中一样（<%….%>）。使用jQuery时，通常使用选择器。例如，如果你需要在<div id=someid></div>结构中替换页面上的一些html代码，你可以这样做（#before element id很重要）：

$("#someid").html('<%= ... some ruby here, it can be render or anything ... %>')

如果你需要在某个元素后面插入一些东西，你可以这样做：

$('<div>Some text</div>').insertAfter("#someid")

等等。

相关文章：