将 Javascript 变量传递给 Rails 部分

Question

我是 Rails 的新手，我正在为一项看似简单的任务而苦苦挣扎。 我有一个（精简的）表格：

<%= form_for @order, html: { :class => 'form-inline' } do |f| %>
  <fieldset>
  <legend><%= params[:action].capitalize %> Order</legend>

  <table class="table">
    <thead>
      <tr>
        <th><%= f.label :symbol %></th>
        <th><%= f.label :price %></th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td><%= f.text_field :symbol, class: 'input-small' %></td>
        <td><%= f.text_field :price, class: 'input-small' %></td>
      </tr>
    </tbody>
  </table>

  <div id='here'></div>

  <%= f.submit "Submit", class: "btn btn-primary" %>

  </fieldset>
<% end %>

<%= link_to 'Get quote', view_quote_orders_path, remote: true %>

当我单击“获取报价”并且符号文本字段失去焦点时，我想在 div $(#here) 中呈现谷歌金融中的报价。 我已经编写了 Ruby 中提取引号的代码。

在 routes.rb 我添加了：

  resources :orders do
    get 'view_quote', on: :collection
  end

在 order_controller.rb 我添加了：

def view_quote
  respond_to do |format|
    format.js { render :layout => false }
  end
end

在 view_quote.js.erb 中：

sym = $('.orders #order_symbol').val();
$('#quotes').html("<%=j render 'googlequote', symbol: sym %>");

在 _googlequote.html.erb 中（我将在其中放置提取引文的逻辑）：

<%= symbol %>

错误在 view_quote.js.erb 中，因为 sym 未定义。 如果我将第二行替换为：

$('#quotes').html("<%=j render 'googlequote', symbol: 'just_a_test' %>");

部分被渲染，但我当然不需要它。 如何将 javascript 变量 sym 传递给部分 _googlequote.html.erb？ 否则，有没有更好的方法来实现我的目标？

Answer 1

谢谢@ben-taitelbaum 和@ajcodez，最后我使用了不同的方法，这在excellent article 的示例4 和RyanonRails 的评论中提出了建议。

这样，在捕获符号字段更改事件后，将符号传递给执行逻辑（从谷歌金融抓取报价）的控制器。结果以 json 格式再次传递给 javascript 以插入到布局中。

Answer 2

您正在对 Orders 集合发出 GET 请求。这意味着所有这些。如果您想使用订单模型中的符号，请向成员提出请求。

否则，您可以将其作为参数传递（我认为您正在尝试这样做）。如果您想在每次更改时将其传递给服务器，我建议使用 jQuery change 方法。然后你可以发出一个ajax请求：

$.get('/orders', { sym: $('.orders #order_symbol').val() }, function(response) {
   $('#here').html(response);
});

在控制器中：

def view_quote
  @sym = params[:sym]
  # use @sym in rendering partial
end

Answer 3

不能放在erb中，因为erb是在服务端渲染的。实现此目的的一种方法是将符号用作view_quote 的参数，因此您可以使用以下内容：

$('#quotes').html("<%=j render 'googlequote', symbol: params[:sym] %>");

（当然，您可以更 REST 方式连接该参数，但这是一个很好的起点）。