使用 Rails 和 Jquery 生成 HTML 不起作用

Question

我试图制作一个按钮来添加一个表单来创建一个包含许多用户的任务，我把这个：

$("#more").click(function(){
    i++;
    $("#more").after("<%= select_tag 'user_id_"+i+"',options_for_select(User.all.map { |u| [u.email,u.id] }) %>");

});

对，这看起来很正常，但它带有 Rails 的标签，看起来是这样的：

< %= select_tag 'user_id_4',options_for_select(User.all.map { |u| [u.email,u.id] }) %><%= select_tag 'user_id_3',options_for_select(User.all.map { |u| [u.email,u.id] }) %><%= select_tag 'user_id_2',options_for_select(User.all.map { |u| [u.email,u.id] }) %>

我怎样才能让这个代码出现在 Rails 中？

更新：

当我尝试将代码 jquery 放在我的 .html.erb 中时，这不会执行，之前是在 application.js 中：

<script type="text/javascript">
$(document).ready(function() {

    var i = 1;
    $("#more").click(function(){
        i++;
        $("#more").after("<%= select_tag 'user_id_"+i+"',options_for_select(User.all.map { |u| [u.email,u.id] }) %>");

    });


});


</script>

Answer 1

让我们尝试一下，这是一个疯狂的猜测，但我希望它能满足您的需求。您可以在新应用程序中尝试此操作。只需创建一个 user 模型，播种一些数据，然后在您的资产组中添加 gem 'jquery-rails'。运行bundle install 并重新启动您的服务器。

在您的 assets/javascripts/application.js 中，确保您至少有以下几行：

//= require jquery
//= require jquery_ujs
//= require_tree .

在你的 users_controller.rb 中，定义 index 方法从数据库中获取所有用户并渲染 index 模板，这很简单你只需要这样做：

def index
  @users = User.all

  respond_to do |format|
    format.html
    format.js
  end
end

然后在 views/users 中编辑您的视图文件，并确保将其命名为 index.html.erb。当您尝试使用浏览器访问 localhost:3000/users 时，将显示此视图（详细信息：这是一个 GET HTML 请求）。在您的视图中，您将编写 HTML 并嵌入 ruby​​，就像您通常所做的那样。现在只需创建一个 div 并给它 id “更多”，然后您还放置一个带有属性 remote

的链接

<%= link_to 'click me', users_path, remote: true %>

然后在 views/users 中创建一个新的视图文件并将其命名为 index.js.erb。您注意到扩展名发生了变化，现在我们使用 js.erb 而不是 html.erb。详细说明：当您的页面将向您的 users#index 路由发出 javascript 请求（在本例中为 GET JS）时，它将以 index.js.erb 响应看法。这里最大的好处是您可以在此视图中编写将在您的浏览器中执行的 javascript 代码。

您还记得我们在链接中添加了remote: true 吗？这告诉 Rails 通用一个将发出 JS 请求的链接。魔法。

所以现在您只需在 views/users/index.js.erb 文件中编写一些 JavaScript 代码。让我们从超级简单的开始：

alert('Hello');

转到您的页面（通常为 localhost:3000/users）并单击“单击我”链接，您应该会看到 javascript 警报框显示。

让我们进行第二次测试，并集成一些 ruby​​ 代码。通过以下方式更改您的 views/users/index.js.erb 的内容：

alert('Ruby compute: <%= 1+1 %>');

在您的网页中，您将看到带有测试“Ruby 计算：2”的警报。您只需要在您的应用程序中根据您的情况调整此技术即可。

可以在此 railscast 上找到相同的技术（但有更好的解释）：http://railscasts.com/episodes/136-jquery