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