在 erb 中的 <% %> 中使用 javascript 变量 - Ruby on Rails答案

【问题标题】：use javascript variable inside <% %> in erb - Ruby on Rails在 erb 中的 <% %> 中使用 javascript 变量 - Ruby on Rails
【发布时间】：2016-07-14 02:56:45
【问题描述】：

我正在使用select_tag 和onchange。我需要调用一个辅助方法并将所选项目的值作为参数传递：

这就是我的辅助方法的样子

def find_template(temp)
    "Hello #{temp}!"
end

我需要做的是使用javascript获取用户的选择，并将其传递给find_template。如果我传递一个字符串而不是模板，它可以正常工作，即 <% @header = find_template("option_1") %> 但是当我使用 var template 时，我收到以下错误：

undefined local variable or method `template' for ...

这是我的erb

<% content_for :javascript do %>
    <script>
        function template() {
            var e = document.getElementById("category");
            var template = e.options[e.selectedIndex].text;
            <% @header = find_template(template) %>
        }
    </script>
<% end %>

<%= select_tag(:category, options_for_select(
                 Blah::TYPES.map {|k, v| [v['name'], k] }),
                 {onChange: 'template()'}) %>

<div id="template-overview">
    <table>
        <tr>
            <% @header.each do |column| %>
                <th class="<%= cycle('even', 'odd') -%>">
                    <%= column %>
                </th>
            <% end %>
        </tr>
    </table>
</div>

【问题讨论】：

你不能在 ruby 中使用 javascript。 Ruby 是服务器端。 Javascript是客户端。要传递这样一个变量，您需要发出 AJAX 请求。 blog.teamtreehouse.com/…
当您的页面加载时，Rails 会生成 HTML、JS、CSS 等，然后将其提供给服务器。 Rails 代码不会在不重新加载页面的情况下更改页面内容。如果你想改变你的内容，你最好找到一种方法来使用你的 JS 来动态改变你的页面内容而不调用 Rails 函数。
这是因为服务器代码在客户端代码之前执行，因此该变量未定义。使用 AJAX。

标签： javascript ruby-on-rails erb

【解决方案1】：

已解决：正确的做法是使用 ajax：

在您的 page.erb 中

<% content_for :javascript do %>
    <script>
        $(document).ready(function(){
            $("#category").change(function(){
                var temp_name = $('#category').val();
                $.ajax({
                    url: "/YOUR_PATH/"+temp_name,
                    dataType: "html",
                    type: "GET",
                    data: {ANY_DATA: VALUES},
                    success: function(data){
                        jQuery("#template_overview").html(data);
                    }
                });
            });
        });
    </script>
<% end %>

<div id="template_overview">
</div>

有一个填充你的 div 的部分

在控制器中：

def display_template
    .
    .
    .
    .
    render partial: '/PATH/template_overview', header: @header
end

当然还有路线

get 'controller/display_template/:temp_id' => 'controller#display_template'

【讨论】：

不要对不是引号的东西使用引号语法。
您在问题/答案中使用的 > 标记。它保留用于装饰引号。