javascript - 将变量传递给 escape_javascript

Question

这将传递字符串 productID 而不是变量 which == 5。如何传递变量而不是字符串？

<script>
$(document).ready(function(){
    $(".test").click(function(){
      var productID = 5;
      $("#productModal").html("<%= escape_javascript(render 'layouts/modal', :product_id => "productID").html_safe %>"); 
      $("#modal").modal();
    });
});
</script>

也尝试过:

$("#productModal").html("<%= escape_javascript(render 'layouts/modal', :product_id => " + productID + ").html_safe %>");

这也只是输出 + productID + 而不是 5

Answer 1

如果您想修复您提供的代码，最好执行以下操作:

<script>
$(document).ready(function(){
    $(".test").click(function(){
      var productID = 5;
      $("#productModal").html("<%=j render('layouts/modal', product_id: " + productID + ").html_safe %>"); 
      $("#modal").modal();
    });
});
</script>

但是这段代码有几个大问题。

---

不显眼

首先，您为什么使用 <script>标签？

这表明您已将其放入 View 中，这是非常糟糕的做法。

最有效的方法是使用 unobtrusive javascript模式，这就是 Rails asset pipeline能够支持:

#app/assets/javascripts/application.js
$(document).on("click", ".test", function(e) {
    var productID = 5;
    $("#productModal").html(productID); 
    $("#modal").modal();
});

这不仅意味着您可以在整个您的应用程序中使用此代码(模块化)，还可以确保您能够调用正确的

--

辅助功能

其次，您会注意到我已经排除了 escape_javascript上面的代码。

这是因为 Assets 管道不处理ERB/Rails代码。

Javascript 是客户端； Rails 是服务器端的。

这很重要，因为当您调用 render 时等等 - 你的 javascript 将无法执行此操作，除非它是从服务器调用的，特别是如果部分需要在 DOM 加载时设置的变量。

为此，您需要使用 ajax :

#config/routes.rb
get "modal", to: "application#modal"

#app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
   def modal
      @productID = params[:product_id]
      respond_to do |format|
         format.js { render "layouts/modal", product_id: @productID }
      end
   end
end

#app/assets/javascript/application.js
$(document).on("click", ".test", function(e) {
   var productID = 5;
   $.get("modal", {product_id: productID}, function(data) { 
      $("#productModal").html(data); 
      $("#modal").modal();
   });
});

这里有一个小警告，如果您附加 .erb到 JS 文件( javascripts/application.js.erb )，您将能够使用 render .但是，这只能在调用文件时发生；因此将任何变量传递给部分将不起作用。

---

更新

这是最终起作用的:

#app/assets/javascripts/application.js
$(document).on("click", ".testinggg", function(e) { 
   var productID = 5; 
   $.get("modal", {product_id: productID}, function(data){ 
     $("#productModal").html(data); 
     $("#modal").modal(); 
   }, "html"); 
});