javascript - 当实例实际存在时需要创建方法而不是更新方法

Question

Ruby 2.0.0、Rails 4.0.3

我有一个 _new 部分。但是，我用一个实际存在的实例来渲染它。这是必要的，以便我可以通过 JavaScript 在 View 和 Controller 之间传递实例 ID，因为我实际上无法传递实例本身。我只需在新方法中调用 Class.first，以便在整个过程中可以使用现有实例。

我的问题是 _new 部分提交按钮识别出该实例已经存在。这会导致它更新而不是创建。该按钮字面意思是更新。当按下时，它会路由到更新方法。那不是我想要的。我想要 create 方法，我将在其中创建一个用收集的参数填充的新实例。

该怎么办？我只携带一个虚拟实例来启动该过程是错误的吗？如果是这样，正确的解决方案是什么？如果这是可以接受的，我如何强制按钮创建而不是更新？

感谢所有帮助和评论。

编辑:我尝试了按钮的变体，试图强制它触发新方法。它继续火以更新。我最后一次失败的努力是:

  <button type="submit" formaction="new_admin_car_path" class="btn btn-default btn btn-primary">Create Car</button>

...结束编辑...

形式为:

<div class="span8">
  <% car_id = @car.id %>
  <%= simple_form_for [:admin, @car],
                      defaults: {label: false},
                      html: {id: 'new_admin_car', class: 'form-vertical', method: post},
                      wrapper: :vertical_form,
                      wrapper_mappings: {
                              check_boxes: :vertical_radio_and_checkboxes,
                              radio_buttons: :vertical_radio_and_checkboxes,
                              file: :vertical_file_input,
                              boolean: :vertical_boolean
                      } do |f| %>
      <%= f.input(:stock_number, {input_html: {form: 'new_admin_car', car: @car, value: nil}, autocomplete: :off, placeholder: 'Stock number?'}) %>
      <%= f.input(:ymm_year_id, {input_html: {form: 'new_admin_car', car_id: car_id, value: nil}, collection: YmmYear.all.order("year desc").collect{|c| [c.year, c.id]}, prompt: "Year?"}) %>
      <%= render partial: "makes", locals: {form: 'new_admin_car', car_id: car_id} %>
      <%= render partial: "models", locals: {form: 'new_admin_car', car_id: car_id} %>
      <%= f.association(:color, {input_html: {form: 'new_admin_car', value: nil}, autocomplete: :off, prompt: 'Color?'}) %>
      <div class="col-xs-6 col-sm-3">
        <br/>
      <input type="submit" form="new_admin_car" value="Create Car" class="btn btn-default btn btn-primary">
  <% end %>
  </div>
</div>

制作部分:

<% unless car_id.blank? %>
    <% car = Car.find(car_id) %>
    <%# car.ymm_make_id = nil %>
    <%= simple_form_for [:admin, car],
                        defaults: {label: false},
                        remote: true do |f| %>
        <% makes ||= "" %>
        <% make = "" %>
        <% make = car.make_id if car.class == Car and Car.exists?(car.id) %>
        <% if !makes.blank? %>
            <%= f.input :ymm_make_id, {input_html: {form: form, car: car, car_id: car.id, value: make}, collection: makes.collect { |s| [s.make, s.id] }, prompt: "Make?"} %>
        <% else %>
            <%= f.input :ymm_make_id, {input_html: {form: form, car: car, car_id: car.id, value: make}, collection: [], prompt: "Make?"} %>
        <% end %>
    <% end %>
<% end %>

Controller 汽车方法新，其中清除只是使所有字段为零:

  def new
    @car = Car.first
    @car.clear
  end

渲染形式:

表单的 JavaScript 是:

// when the #year field changes
$("#car_ymm_year_id").change(function () {
    // make a GET call and replace the content
    // First select identifies what has been selected, or fired
    var year = $('select#car_ymm_year_id :selected').val();
    // Pull the variables from the input_html tag
    var form = $('select#car_ymm_year_id').attr("form");
    var car_id  = $('select#car_ymm_year_id').attr("car_id");
    // Routes to the controller action
    $.post('/admin/cars/make_list/',
        {
            form: form,
            year: year,
            car_id: car_id
        },
        function (data) {
            $("#car_ymm_make_id").html(data);
        });
    return false;
});

Controller 方法:

  def make_list
    makes = YmmMake.makes(params[:year])
    #@car = Car.find(params[:car_id])
    render partial: "makes", locals: {car_id: params[:car_id], form: params[:form], makes: makes}
  end

Answer 1

如果我理解正确的话，您希望实现以下目标:

显示用于创建新汽车模型的表单。在此表单中，用户输入年份；然后，系统从服务器加载该年的所有品牌，并显示一个选择下拉菜单，供用户选择品牌。

汽车型号属于 ymm_make，因此我们在提交表单时包含所选的 ymm_make_id。

这是我解决这个问题的方法。我将使用标准 Rails 表单助手，这样我们就可以少担心一个抽象层。

表格(带有 Car.new ):

<%= form_for [:admin, Car.new] do |f| %>
  <%= f.text_field :stock_number, autocomplete: "off", placeholder: "Stock number?" %>
  <%= text_field_tag :year_search, nil, placeholder: "Year" %>
  <%= f.select :ymm_make_id %>

  <!-- skipping models and colors here for the sake of brevity -->

  <%= f.submit "Create" %>
<% end %>

对于年份搜索字段，我使用 text_field_tag而不是f.text_field ，因为我不希望在提交整个表单时将搜索字段值作为汽车的一部分提交。我暂时将下拉字段留空 - 我们将通过 Javascript 和 JSON 填充该字段。

对于品牌列表，我将创建一个返回 JSON 的资源 Controller :

class YmmMakesController < ApplicationController
  respond_to :json

  def index
    @makes = YmmMake.makes(params[:year])

    respond_with @makes
  end
end

不要忘记此 Controller 的route.rb条目，例如

namespace :admin do
  resources :ymm_makes, only: :index
end

我们将制作<select> Javascript 中 JSON 的选项:

$("input[name=year_search]").change(function () {

    // send a GET request to /admin/ymm_makes with the 'year' parameter
    // set to the value of the year_search text field
    $.getJSON( "/admin/ymm_makes", {year: $(this).val()}, function(data) {
      var options_html = [];

      // iterate over the JSON that we received back; each entry is one 'ymm_make'
      // in JSON form
      $.each( data, function( index, make ) {
        // make a new <option> tag for each make and push it into the options_html array
        // I assume here that YmmMake has an attribute called 'name' you want to display
        options_html.push( "<option value='" + make.id + "'>" + make.name + "</option>" );
      });

      // put all our generated <options> tags into the <select> tag
      $('select#car_ymm_make_id').html( options_html.join('') );
    });

});

完成所有这些后，您应该有一个用于创建与 YmmMake 模型对象关联的新车的工作表单。

对现有代码的一些观察:

嵌套表单

<%= simple_form_for [:admin, @car] do |f| %>
  <%= render partial: "makes", locals: {form: 'new_admin_car', car_id: car_id} %>
<% end %>

如果我没看错的话，你的“makes”部分也包含一个表单，所以你正在创建一个 <form>嵌套在 <form> 中。 HTML does not allow that .

结束标记顺序错误

      <div class="col-xs-6 col-sm-3">
        <br/>
      <input type="submit" form="new_admin_car" value="Create Car" class="btn btn-default btn btn-primary">
  <% end %>
  </div>

结束</div>必须位于 <% end %> 之前。如果您构建无效的 HTML，您将面临奇怪的视觉行为和 Javascript 错误的风险。

冗余参数

<%= simple_form_for [:admin, @car],
                      html: {id: 'new_admin_car', class: 'form-vertical', method: post},
                      do |f| %>

“id”和“method”应该是默认值。将它们排除在外会使代码更易于阅读。

无效 <input>通过input_html属性

<%= f.input(:stock_number, {input_html: {form: 'new_admin_car', car: @car, value: nil}, autocomplete: :off, placeholder: 'Stock number?'}) %>

我不熟悉 simple_form，但据我所知，input_html用于向输入元素添加属性。因此，像上面这样的行将产生一个带有无效 car 的文本输入。属性。 form一旦删除嵌套表单，属性就不再是必需的。

HTTP 方法错误

$.post('/admin/cars/make_list/'

您可以通过 POST AJAX 请求加载您的作品。对于只返回数据但不改变任何内容的请求，GET 通常更合适。