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

我需要将这些变量传递给任何新形式这将被渲染，但这些变量依赖于从服务器或数据库传递的数据或其他内容。看起来它试图首先运行我的JavaScript，尽管我声明了$(document).ready。

这里是整个表格。

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

第43行是我渲染第一个部分的地方，当用户按下“+”时，第一个部分将被复制。当用户按下该按钮时，我想要在它下面弹出相同的确切形式。

https://pastebin.com/ieLYfYm4

我是一个真正的noob当涉及到合并JS和Rails，我一直在挣扎了很多与我的项目的一部分。我真的不明白什么是首先加载或我的JS应该去的地方。尽管到现在为止，我一起砍了什么似乎都很好。不知道为什么它现在甚至在任何时候都有问题。也许我的浏览器在缓存中存储了一些能够防止此错误被引发的内容？

代码，如果你能不看pastbin

<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 %>

（ “远程：真正的” 将使一个Ajax请求）。

您将获得网址参数类别中的控制器，可以再次对其进行实例化：

@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