从Prototype迁移到jQuery(对于新手)

时间:2011-06-08 08:36:55

标签: javascript jquery ruby-on-rails ruby prototypejs

我正在使用Ruby on Rails 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文件中的错误,我将jQuery.noConflict()添加到了application.js文件中。现在,我必须做什么?

如果我在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>

2 个答案:

答案 0 :(得分:1)

有两个不同的东西。

它们是常规脚本,您可以使用与jquery相同的方式加载: 您将它们放在public/javascript目录中,并将它们包含在

<%= javascript_include_tag YourNameFile %>

请注意,我没有添加 .js javascript_include_tag会为你做到这一点。

然后你有 JS模板。这就像你的Prototype视图。除了你有Jquery里面。 所以你以前做过的工作! 如果你使用

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

它将呈现edit.js.erb(您可以在与<{1}}文件相同的相同目录中找到它。

然后你可以在这些文件中添加你的jQuery和'ruby'(就像原型一样)。 只需确保加载jQuery。

如果我遗漏了某些内容,请添加评论。 :)

===编辑===

在你的模板中,你必须只放置edit.html.erb围绕Rails功能!!否则,它应该是Javascript。所以你<% %>应该是这样的:

edit.js.erb

答案 1 :(得分:0)

您的文件应该命名为* .js.erb并且位于视图文件夹中(就像您的* .html.erb一样),它们的名称就像您命名* .html.erb文件一样,即edit.js .erb用于编辑操作。你可以在这些文件中编写ruby代码,就像你为原型编写的那样(&lt;%....%&gt;)。使用jQuery,您通常使用选择器。例如,如果你需要在一些<div id=someid></div>构造中替换页面上的一些html代码,你可以用这样的方式(在元素id很重要之前#)中这样做:

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

如果您需要在某个元素之后插入某些内容,则可以这样执行:

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

等等。