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

Question

我看到了类似的问题，但仍然不知道如何实现我的目标。 我想做那件事：

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

这段代码在我的脚本标签中的正确视图中。

    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);
    });

我的控制器创建动作：

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。

在我的控制器中，我添加了：

gon.products = current_user.products

然后尝试

alert(gon.products)

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

alert(gon.products.find(1))

它不起作用。

您知道如何将这个javascript id变量放入erb代码吗？ 还是有其他解决方案？

Answer 1

最好的办法是添加一个远程表单（它可能是隐藏的），该表单发布您想要的任何内容（javascript值），然后由控制器处理。 然后，您可以使用js视图呈现它。

这可能是最“类似铁路”的解决方案。

这是一些代码：

在路线中：

resource :my_form, only: :create

在视图中：

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

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

然后，在控制器中您将具有以下内容：

respond_to :js

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

并且您还将添加create.js.erb视图，您可以在其中添加一些可以使用在控制器中创建的任何实例变量的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 }) %>');

有关在Rails中使用JavaScript的更多详细信息

---

更新

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

Answer 2

问题在于，在浏览器甚至没有获取javascript文件之前，就已经在服务器上评估了erb代码，因此使用这种方式没有任何意义。 建议您仅在javascript中使用erb来处理诸如asset_path简单事情

Answer 3

我认为首先让您的模型作为js variable（json object）对浏览器可见。 在视图文件末尾，如下所示（以下是haml语法）：

:javascript

   var userProducts        = #{@current_user.products.to_json};

然后在javascript表达式中使用它