使用相同的引导模式来添加一个新的对象并编辑该对象

Question

我有一个Rails应用程序，我使用Bootstrap模式和Jquery将新对象添加到父对象。这现在适用于我希望添加的4个不同的子对象（我在父对象页面上呈现4个独立的模态）。我想重复使用相同的模式来呈现编辑表单（而不是新的表单），而无需在页面中添加4个额外的（大部分相同的）模式。这可能吗？

莫代尔例如：

<!-- modal for inputting a new company --> 
<div class="modal fade" id="company_modal" tabindex="-1" role="dialog" aria-labelledby="company_modal" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 
      <h4 class="modal-title" id="myModalLabel">Add new company</h4> 
     </div> 
     <div class="modal-body"> 
     <%= render 'companies/modal' %> 
     </div> 
    </div> 
    </div> 
</div> 

公司/莫代尔代码：

<%= form_for(@company, :html => {role: :form, 'data-model' => 'company'}, remote: true) do |f| %> 
     <% if @company.errors.any? %> 
      <div id="error_explanation"> 
      <h2><%= pluralize(@company.errors.count, "error") %> prohibited this company from being saved:</h2> 

      <ul> 
      <% @company.errors.full_messages.each do |message| %> 
       <li><%= message %></li> 
      <% end %> 
      </ul> 
      </div> 
     <% end %> 
    <div class="form-group"> 
     <%= f.label :company_name, :class => "control-label" %></br> 
     <%= f.text_field :company_name, :class => 'form-control' %> 
     <span class="help-block"></span> 
     </div> 
     <div class="checkbox input"> 
      <label> 
      <%= f.check_box :existing_customer %> Existing Customer? 
      </label> 
     </div> 
     <div id="organization_id" data-organizationid="<%= @current_user.organization.id %>"> 
     <%= f.hidden_field :organization_id%> 
     </div> 
     <div class="actions"> 
     <%= f.submit "Save", class: "btn btn-sm btn-success" %> 
     </div> 
    <% end %> 

当前的Javascript：

$(document).ready(function() { 
$('#competitor_modal').on('show'); 
$('.modal').on('shown.bs.modal', function() { 
$("#competitor_competitor_name").focus(); 
var Org; 
Org = $('#organization_id').attr('data-organizationid'); 
//pass the organization_id to the hidden text box 
$('#competitor_organization_id').val(Org); 
}); 
}); 

$(document).ready(function(){ 

    $(document).bind('ajaxError', 'form#new_competitor', function(event, jqxhr, settings, exception){ 

// note: jqxhr.responseJSON undefined, parsing responseText instead 
$(event.data).render_form_errors($.parseJSON(jqxhr.responseText)); 

}); 

}); 

我相信我不得不改变组织所用的JavaScript。 js以便它可以确定请求是否来自“添加新公司”按钮或者是否它来自“编辑公司”按钮。这是最佳做法还是我只是一个白痴？

Answer 1

的答案来回答你的问题之一，“确定请求是否已经从‘添加新公司’按钮，或不管它是来自‘编辑公司’是使用

params[:controller] 
params[:action] 

确定控制器动作的对象。 或者使用一个会话变量或一些param[:from_where_name]，并检查它在JS，最糟糕的情况下使用隐藏字段或一些data-field传递所需的值。

Answer 2

我认为你的想法是正确的方向和NO ，你不是白痴:)

Presonally我会考虑以下几点：

1. #company_modal明确的内容 - 只剩“骨架” - 砂矿的内容，我们要动态地操纵，
2. 写一个共同的JQ功能渲染模式窗口（允许所有的参数，如标题，内容，按钮，...
3. 编写JQ函数创建/读取/更新/删除（CRUD）调用相同的JQ模态渲染功能与不同的参数和不同的动作，
4. 写功能委托事件和动作（将动作分配给dyn允许调用CRUD函数的模态按钮。

这似乎很多，但我认为它的方式不仅仅是创造了不同的动作等

但是，我们必须计划它真的很好（这将是确切的外观和感觉，哪些领域不同模态更好，模块化，什么变量，...）