表单渲染后的茧建筑资源

Question

我有一张账单表格。打开后，我选择一个供应商来显示供应商的未结采购订单列表。选择采购订单应获取采购订单中订购的所有项目，并将它们显示为账单中的行项目。

当表单已经呈现并且我已经看到嵌套属性和在表单上添加或删除等的链接时，如何实现这一点？

我当前的实现是使用 cocoon 的简单嵌套资源。

<%= simple_form_for(@bill) do |f| %>
  <%= f.error_notification %>
  <div class="form-inputs">
    <%= f.input :vendor_id, as: :select do %>
      <%= f.grouped_collection_select :vendor_id, Warehouse.ordered, :vendors, :name, :id, :name, include_blank: true %>
    <% end %>
  </div>
  <div id="items">
    <div id="ingredient_purchase" class="row">
      <div class="row">
        <%= f.simple_fields_for :warehouse_ingredient_purchase_logs do |warehouse_ingredient_purchase_log| %>
        <%= render 'warehouse_ingredient_purchase_log_fields', :f => warehouse_ingredient_purchase_log %>
        <% end #f.simple_fields_for %>
        <div class="links">
          <%= link_to_add_association 'Add More', f, :warehouse_ingredient_purchase_logs %>
        </div>
      </div>
    </div>
  </div>
  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end #simple_form_for(@bill) do |f| %>
<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet">
  <div class="modal-content">
    <h4>Purchase Orders</h4>
    <div class="purchase_orders_data"></div>
  </div>
</div>

Answer 1

因此，与其先渲染一个表单，然后尝试使用 javascript 修改它， 我会首先收集参数：供应商和一个或多个采购订单，然后使用这些数据来构建账单，然后显示它。

您如何实际执行此操作（使用 html 或 ajax/xhr）取决于您，但当您知道应该如何构建账单表单时，有效地等待构建账单表单。

可能的方法：

• 打开账单创建屏幕，显示供应商列表，显示模式，然后发布并创建账单，然后重定向到编辑（很简单，但账单已经创建，也许您不希望这样做），
• 打开账单创建屏幕，控制器没有参数所以：显示供应商列表，显示模式，然后再次获取账单创建屏幕，但使用给定参数（供应商 + 账单）并显示创建新账单的正确表格;
• 打开账单创建、显示供应商列表、打开模式，选择后执行 ajax/xhr 调用以构建表单，然后渲染并继续。

这很笼统，但可能有助于解决问题。

Answer 2

您可以通过 ajax 完成此操作

当您选择其中一项时，您需要对后端服务器执行异步调用。页面不会通过异步调用刷新。

您可以使用 button_to 或 link_to 助手触发此操作，然后配置路由以触发您的操作（或仅使用模型对象自动生成路由）并在您的操作中获取这些供应商账单：

def action
   @vendor = Vendor.find(params[:id])
   @bills = @vendor.bills
   respond_to do |format|
      format.js
   end
end

在你的js文件action.js.erb你可以编写js逻辑来修改你的表单

供应商账单也可以包含在部分_object.html.erb 中，action.js.erb 可以将该部分附加到页面中

$("<%= escape_javascript(render @object) %>").appendTo("#yourHtmlId");