JavaScript 正在设置要在 Rails 实际设置之前附加的部分变量

Question

我有一个用于创建列表的表单。我想让用户能够为新项目创建新表单，以便保存以供将来制作列表。我想要一个“+”按钮来添加通过 JavaScript 创建新表单。它对我的测试用户来说效果很好，但事情变得困惑，所以我创建了一个新用户来重新开始。当我尝试加载我的新列表页面时，我得到了他的:

undefined method `id' for nil:NilClass

具体来说，它指向我的 JavaScript 中的这一点:

$(this).parents(':eq(1)').append("<%= escape_javascript render partial: 'shared/user_item_form', locals: {f: @f, category_id: @category.id} %>");

我需要将这些变量传递给任何要呈现的新表单，但这些变量依赖于从服务器或数据库等传递的数据。尽管我声明了 $(document).ready，但它似乎正在尝试先运行我的 JavaScript。

这是完整的表格。

第 26 行是这个问题开始的地方，我在其中声明了一些类变量，以便它们到达下面的 javascript。

第 43 行是我渲染第一个部分的地方，当用户按“+”时将复制该部分。当用户按下该按钮时，我希望在其下方弹出相同的表单。

https://pastebin.com/ieLYfYm4

在结合 JS 和 Rails 方面，我确实是个菜鸟，而且我在项目的这一部分上遇到了很多困难。我真的不明白首先加载什么或者我的 JS 应该去哪里。到目前为止，我所编写的内容似乎运行良好。如果现在这是一个问题，不知道为什么它甚至可以在任何时候工作。也许我的浏览器在缓存中存储了某些内容来防止引发此错误？

如果你无法查看过去的bin，请编写代码

<div class="new-list">
    <h2>New List</h2>
    <%= form_for @list, url: list_path, html: {class: "form-signin"} do |f| %>
        <%= f.text_field :name, placeholder: "Name your list (optional)" %>
        <!-- Category -->
        <div class="categories">
            <% current_user.categories.each do |category| %>
                <h3 class="category">
                  <%= category.name %>
                </h3>
                <!-- Items -->  
                <div class="dropdown-button" data-toggle="collapse" data-target="#<%= category.name %>">
                    <span class="glyphicon glyphicon-chevron-down"></span>
                </div>
                <!-- Dropdown div -->
                <div id="<%= category.name %>" class="collapse">
                    <div class="table-responsive">
                        <!-- User Item table -->
                        <table class="items">
                            <tr>
                                <th>Add</th>
                                <th>Name</th>
                                <th>Price</th>
                                <th>Qnty</th>
                            </tr>
                        <% category.user_items.each do |item| %>
                            <%= f.fields_for l = @list.list_items.build, index: l.id do |list_item| %>
                                <% @category = category %>
                                <% @f = f %>
                                <tr>
                                    <td><%= list_item.check_box :user_item_id, { checked: false }, item.id, nil %></td>
                                    <td><%= item.name %></td>
                                    <td><%= item.price %></td>
                                    <td><%= list_item.number_field :quantity,
                                                                                                    min: 1,
                                                                                                    class: "num"%></td>
                                </tr>
                            <% end %>
                        <% end %>
                      </table>
                    </div>
                    <h3>Create a new item here:</h3>
                    <%= render partial: 'shared/user_item_form', locals: {f: f, category_id: category.id}  %>
                    <h4><span class="glyphicon glyphicon-plus" id="add-item"></span>Add More</h4>
                </div>
            <% end %> <!-- current_user.categories -->
            <br>
            <%= f.submit "Submit" %>
        </div>
    <% end %>
</div>

<!-- dropdown button script -->
<script>
  $(document).ready(function () {
      $('.data-toggle').collapse();
      addNewItemForm();
  });

function addNewItemForm(){
  $('#add-item').click(function(){
        $(this).parents(':eq(1)').append("<%= escape_javascript render partial: 'shared/user_item_form', locals: {f: @f, category_id: @category.id} %>");
  });
}
</script>

Answer 1

问题在于，脚本底部的 javascript 函数 addNewItemForm() 不是在您调用它时计算的，而是在页面第一次完全呈现时计算的，并且在那个时刻和那个地方，当 Rails 尝试评估以下字符串:<%= escape_javascript render partial: 'shared/user_item_form', locals: {f: @f, category_id: @category.id} %> @category 变量超出范围且未定义。

实际上，您需要通过单击带有相应参数的按钮来发出另一个服务器请求，并让服务器完成这项工作:渲染新的部分并调用 javascript 来更改 HTML。

您可以通过以下示例轻松做到这一点:

<%= link_to 'Add New Item', [:new, category, :items], remote: true %>

(“remote: true”将发出 ajax 请求)。

您将在 Controller 的 URL 参数中获取类别，并可以再次实例化它:

@category = Category.find(params[:category_id])

然后使用以下代码进行响应 (new.js.erb):

<%= j render 'shared/user_item_form', category_id: @category.id %>

(这只是你的行的简写)

以下是对类似示例的文档的引用:http://guides.rubyonrails.org/working_with_javascript_in_rails.html#a-simple-example