javascript - Rails 4 - 从客户端删除数组元素并提交

Question

我有一个数组，我创建了一个数组来在客户端添加和删除值，然后在触发更新操作时将其持久保存在数据库中。

添加/删除数组值是可行的，除了使用这种方法，我无法删除数组的最后一个值。简单地使用 Javascript 删除 dom 元素并提交它对数组的最后一个值没有任何作用。

我希望能够清空一个数组，以便在页面重新加载时，为第一个值条目显示空白字段。

删除数组值

$(document).on "click", ".delete_step", (event) ->
  cache = $(this).closest(".step_set")
  cache.fadeOut "fast", ->
    cache.remove()
    null
  event.preventDefault()

为新数组值创建新字段

$(document).on "click", "#add_step", (event) ->
  html = "<div class='step_set'>" + "<input type='button' class='delete_step' value='Delete'>" + "<input type='text' name='recipe[steps][]'>" + "</div>"
  $( "#steps" ).append html
  event.preventDefault ()

Controller

def update
  if @recipe.update_attributes!(recipe_params)
    respond_with(@recipe)
  else
    render 'edit'
  end
end

def recipe_params
  params.require(:recipe).permit(:title, :image, :serving, { steps: [] }, ingredients_attributes: [:id, :name, :_destroy])
end

查看

<%= simple_form_for @recipe do |f| %>
  <button class="add" id="add_step">
    <span>+</span>Add Step
  </button>

  <fieldset id="steps"> 
    <% @recipe.steps.each_with_index do |individual_step, index| %>
      <div class="step_set" id="step_set<%= index %>">
        <a class="delete_step">Delete</a>
          <input type="text" value="<%= individual_step %>" name="recipe[steps][]">
      </div>
    <% end %>
  </fieldset>
<% end %>

通过删除和更新删除该元素后

我仍然在展示页面中看到这个。

Answer 1

好吧，看来我的预感是对的。您正在使用对象 @recipe 构建表单。在您的 update 操作中，@recipe 仍然保留值并被转移到您的 View 中。

如何在你的update中尝试用@recipe = @recipe.new或类似的东西重新初始化@recipe，这样它只是一个类的空对象。