javascript - Rails - 如何将 javascript 变量放入 erb 代码中

Question

我见过一些类似的问题，但仍然不知道如何实现我的目标。我想做那件事:

1. 显示模式，其中产品由 div 表示。
2. 用户选择一些产品(我将 .active 类添加到所选产品中)
3. 然后我使用 jQuery 制作所选产品 id 的数组。
4. 最后我想为每个产品创建一个 div，其中包含数据库中有关该产品的一些信息。我正在使用 js .append() 来做到这一点。这里有一个问题。

此代码位于正确 View 中我的脚本标记中。

    var chosen_products_array;

    $('.product-to-choose').click(function() {
        $(this).toggleClass("active");
        $(this).find('i').toggleClass("visible");
    });

    $('#chosen-products-confirm').click(function() {
        var chosen_products = $('.product-to-choose.active');
        chosen_products_array = jQuery.makeArray( chosen_products );
    });

    $('#confirm').click(function() {

        var textToInsert = '<div><h4>Products:</h4>';
        $.each(chosen_products_array, function(count, item) {
            var id = $(item).attr('id').substr(8); // id is product_number
            textToInsert += '<div><li name="chosen-product"> <%= current_user.products.find(' + id +').name %></li></div>';
        });
        textToInsert += '</div>';
        $('#div-example').append(textToInsert);
    });

我的 Controller 创建操作:

def create
@meal = current_user.meals.build(meal_params)
if @meal.save
  current_user.type_tags.each do |type_tag|
    key = "type#{type_tag.id}"
    if params[key]
      @meal.type_tags << type_tag # zapis do bazy danych
    end
  end
  flash[:success] = "Create new meal!"
  redirect_to meals_path
else
  #render 'meals/new'
end

结束

此行生成错误:

textToInsert += '<div><li name="chosen-product"> <%= current_user.products.find(' + id +').name %></li></div>';

错误:

Couldn't find Product with 'id'=+id+ [WHERE "products"."user_id" = ?]

我知道将js变量传递给rails erb时存在问题，但是在这种情况下我该如何解决它？我也尝试过使用 gon。

在我的 Controller 中，我添加了:

gon.products = current_user.products

然后尝试

alert(gon.products)

没关系 - 对象数组，但是当我尝试时

alert(gon.products.find(1))

这不起作用。

您知道如何将此 javascript id 变量放入 erb 代码吗？或者也许有任何不同的解决方案？

Answer 1

可能最好的办法是添加一个远程表单(它可能是隐藏的)来发布您想要的任何内容(javascript 值)，然后由 Controller 处理。然后就可以用js View 渲染它了。

这可能是最“像 Rails 的”解决方案。

这是一些代码:

在 route :

resource :my_form, only: :create

在 View 中:

<%= form_tag(my_form_path, remote: true, method: :post) do %>
  <%= hidden_field_tag :val %>
<% end %>

您可以通过 JavaScript 动态更改 val，并在需要时提交表单。

然后，在 Controller 中你有这样的东西:

respond_to :js

def create
  # do something with params['val']
  @my_val = params['val']
end

您还可以添加 create.js.erb View ，在其中您可以添加一些可以使用 Controller 中创建的任何实例变量的 JavaScript。

//create.js.erb
$('#someElement').html('<%= @my_val %>');

如果不清楚的话，让我强调一下，该表单是远程(ajax)，因此它是在后台发送的，并且页面不会重新加载。

当浏览器收到响应时，它可能包含您决定呈现的任何 javascript(create.js.erb 的内容)，然后浏览器执行该 javascript。

因此，您可以在其中添加任何带有通过 Rails 动态更改的参数的 jquery 命令，或者您也可以渲染 html 部分并用它们替换任何元素，如下所示:

//create.js.erb
$('#my_id').html('<%= j(render partial: 'my_form/_some_partial.html.erb', locals: { my_val: @my_val }) %>');

有关 Working with JavaScript in Rails 的更多详细信息

<小时/>

更新

另一个较差但更容易实现的解决方案是始终渲染所有产品，但最初隐藏它们，然后根据需要通过 jQuery 显示它们。您只需要向这些产品添加适当的 CSS 类或数据属性，以及用于选择它们的链接。