0

我有一个创建账单的表格。可以使用用于 rails 的nested_form gem 添加该法案的不同文章。

现在我想在每次更改文章或文章数量时更新“总金额”值。

我的问题是：如何访问嵌套表单中的不同属性？

希望可以有人帮帮我。

我的 _forms.html.erb：

<%= nested_form_for @bill do |f| %>
    <div id="myModal" class="modal">
      <div class="modal-header">
        <%= link_to 'x', bills_path, :class => "close", "data-dismiss" => "modal" %>
        <% if @current_method == "edit" %>
            <h3>Rechnung bearbeiten</h3>
        <% else %>
            <h3>Rechnung anlegen</h3>
        <% end %>
      </div>
      <div class="modal-body">
  <% if @bill.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@bill.errors.count, "Fehler") %> trat beim Speichern auf:</h2>

      <ul>
      <% @bill.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

<div class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Rechnungsdatum</label>
    <div class="controls"><%= f.date_select :date %></div>
  </div>
  <div class="control-group">
    <label class="control-label">Kunde</label>
    <div class="controls"><%= f.collection_select :customer_id, Customer.all, :id, :name_company_id %></div>
  </div>
  <div class="control-group">
    <label class="control-label">Artikel</label>
    <div class="controls">
      <%=f.fields_for :bill_items do |builder| %>
        <%= render 'bill_item_fields', :f => builder %>
      <% end %>
      <%= f.link_to_add "Artikel hinzufügen", :bill_items, :class => "btn btn-success", :style => "color:#fff" %><br>
      <small>(1 Einheit entspricht 30 min)</small>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">Rabatt</label>
    <div class="controls"><%= f.text_field number_with_precision(:discount, :precision => 2), :class => "input-mini", :style => "color:red", :placeholder => "0.00" %> &euro;</div>
  </div>
  <div class="control-group">
    <label class="control-label"><div style="font-weight:bold;">Gesamtpreis</div></label>
    <div class="controls"><div style="font-weight: bold;"><%= number_with_precision(@bill.total, :precision => 2) %> &euro;</div></div>
  </div>
  <hr>
  <% if @current_method == "edit" %>
  <div class="control-group">
    <label class="control-label">Bezahlt</label>
    <div class="controls">
      <%= f.check_box :state, :id=>"ch_location" %></div>
  </div>
      <% end %>
  <div class="control-group">
    <label class="control-label">Kategorie</label>
    <div class="controls"><%= f.select :category, %w{CMD Lindau}, :class => "input-mini" %></div>
  </div>
  </div>
        </div>

    <div class="modal-footer">
      <%= link_to 'Schliessen', bills_path, :class => "btn", "data-dismiss" => "modal" %>
      <%= f.submit 'Speichern',  :class => "btn btn-primary", :style => "color:#fff", :disable_with => "Speichere..." %>
    </div>
  </div>
</div>
<% end %>

和particl _bill_items_field.html.erb：

<%= f.text_field :count, :class => "input-mini calc", :placeholder => "Anzahl", :id => "item_quantity" %>
<%= f.collection_select :article_id, Article.all, :id, :name_and_price, :id => "item_price" %>
Löschen? <%= f.check_box :_destroy %>
<br><br>

编辑：我认为字段“：name_and_price”必须用正则表达式解析？目前它看起来像“NAME (x.xx €)”

编辑：HTML代码：

<body>

<!-- Navigation
    ================================================== -->
<form accept-charset="UTF-8" action="/bills/43" class="edit_bill" id="edit_bill_43" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="Ft2ry9QwRVEITjDRxt8b99OfVKHbaoiLkyotblgeJ9g=" /></div>
    <div id="myModal" class="modal">
      <div class="modal-header">
        <a href="/bills" class="close" data-dismiss="modal">x</a>
            <h3>Rechnung bearbeiten</h3>
      </div>
      <div class="modal-body">

<div class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Rechnungsdatum</label>
    <div class="controls"><select id="bill_date_1i" name="bill[date(1i)]">
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option selected="selected" value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<select id="bill_date_2i" name="bill[date(2i)]">
<option value="1">January</option>
<option selected="selected" value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="bill_date_3i" name="bill[date(3i)]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option selected="selected" value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
  </div>
  <div class="control-group">
    <label class="control-label">Kunde</label>
    <div class="controls"><select id="bill_customer_id" name="bill[customer_id]"><option value="1" selected="selected">#Schnell Adrian - CMD (ID 1)</option>
<option value="6">#Hans Gustav - Test2 (ID 6)</option></select></div>
  </div>
  <div class="control-group">
    <label class="control-label">Artikel</label>
    <div class="controls">
      <div class="fields">
        <input class="input-mini calc" id="item_quantity" name="bill[bill_items_attributes][0][count]" placeholder="Anzahl" size="30" type="text" value="22" />
<select id="bill_bill_items_attributes_0_article_id" name="bill[bill_items_attributes][0][article_id]"><option value="1">iOS (35.0 &euro;)</option>
<option value="2">Webdesign (25.0 &euro;)</option>
<option value="3">Beratung (50.0 &euro;)</option>
<option value="6" selected="selected">Anfahrt (0.8 &euro;)</option></select>
Löschen? <input name="bill[bill_items_attributes][0][_destroy]" type="hidden" value="0" /><input id="bill_bill_items_attributes_0__destroy" name="bill[bill_items_attributes][0][_destroy]" type="checkbox" value="1" />
<br><br>
<input id="bill_bill_items_attributes_0_id" name="bill[bill_items_attributes][0][id]" type="hidden" value="54" /></div><div class="fields">
        <input class="input-mini calc" id="item_quantity" name="bill[bill_items_attributes][1][count]" placeholder="Anzahl" size="30" type="text" value="2" />
<select id="bill_bill_items_attributes_1_article_id" name="bill[bill_items_attributes][1][article_id]"><option value="1" selected="selected">iOS (35.0 &euro;)</option>
<option value="2">Webdesign (25.0 &euro;)</option>
<option value="3">Beratung (50.0 &euro;)</option>
<option value="6">Anfahrt (0.8 &euro;)</option></select>
Löschen? <input name="bill[bill_items_attributes][1][_destroy]" type="hidden" value="0" /><input id="bill_bill_items_attributes_1__destroy" name="bill[bill_items_attributes][1][_destroy]" type="checkbox" value="1" />
<br><br>
<input id="bill_bill_items_attributes_1_id" name="bill[bill_items_attributes][1][id]" type="hidden" value="56" /></div>      <a href="javascript:void(0)" class="btn btn-success add_nested_fields" data-association="bill_items" data-blueprint-id="bill_items_fields_blueprint" style="color:#fff">Artikel hinzufügen</a><br>
      <small>(1 Einheit entspricht 30 min)</small>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">Rabatt</label>
    <div class="controls"><input class="input-mini" id="bill_discount" name="bill[discount]" placeholder="0.00" size="30" style="color:red" type="text" value="15" /> &euro;</div>
  </div>
  <div class="control-group">
    <label class="control-label"><div style="font-weight:bold;">Gesamtpreis</div></label>
    <div class="controls"><div style="font-weight: bold;">72.60 &euro;</div></div>
  </div>
  <hr>
  <div class="control-group">
    <label class="control-label">Bezahlt</label>
    <div class="controls">
      <input name="bill[state]" type="hidden" value="0" /><input checked="checked" id="ch_location" name="bill[state]" type="checkbox" value="1" /></div>
  </div>
  <div class="control-group">
    <label class="control-label">Kategorie</label>
    <div class="controls"><select id="bill_category" name="bill[category]"><option value="CMD" selected="selected">CMD</option>
<option value="Lindau">Lindau</option></select></div>
  </div>
  </div>
        </div>

    <div class="modal-footer">
      <a href="/bills" class="btn" data-dismiss="modal">Schliessen</a>
      <input class="btn btn-primary" data-disable-with="Speichere..." name="commit" style="color:#fff" type="submit" value="Speichern" />
    </div>
  </div>
</div>
</form><div data-blueprint="&lt;div class=&quot;fields&quot;&gt;
        &lt;input class=&quot;input-mini calc&quot; id=&quot;item_quantity&quot; name=&quot;bill[bill_items_attributes][new_bill_items][count]&quot; placeholder=&quot;Anzahl&quot; size=&quot;30&quot; type=&quot;text&quot; /&gt;
&lt;select id=&quot;bill_bill_items_attributes_new_bill_items_article_id&quot; name=&quot;bill[bill_items_attributes][new_bill_items][article_id]&quot;&gt;&lt;option value=&quot;1&quot;&gt;iOS (35.0 &amp;euro;)&lt;/option&gt;
&lt;option value=&quot;2&quot;&gt;Webdesign (25.0 &amp;euro;)&lt;/option&gt;
&lt;option value=&quot;3&quot;&gt;Beratung (50.0 &amp;euro;)&lt;/option&gt;
&lt;option value=&quot;6&quot;&gt;Anfahrt (0.8 &amp;euro;)&lt;/option&gt;&lt;/select&gt;
Löschen? &lt;input name=&quot;bill[bill_items_attributes][new_bill_items][_destroy]&quot; type=&quot;hidden&quot; value=&quot;0&quot; /&gt;&lt;input id=&quot;bill_bill_items_attributes_new_bill_items__destroy&quot; name=&quot;bill[bill_items_attributes][new_bill_items][_destroy]&quot; type=&quot;checkbox&quot; value=&quot;1&quot; /&gt;
&lt;br&gt;&lt;br&gt;
&lt;/div&gt;" id="bill_items_fields_blueprint" style="display: none"></div>

</body>
4

1 回答 1

2

我强烈建议您不要在视图中执行此操作，因为您会遇到您提到的问题（需要从格式化输出中解析值，例如价格）。

这是视图模型可能有用的地方，因为您试图从用于显示的模型中获取更多值。一个辅助方法可能就足够了，但是根据逻辑的复杂程度，您需要对其进行测试，并且很容易测试未与 Rails 耦合的类。

查看用于 Rails 的视图模型实现的draper gem 。

这并没有真正解决您关于如何将其与 jQuery 集成的问题，但根据您的需要，您可以在事情发生变化时使用 ajax 动态更新此表单。您还可以考虑将您感兴趣的原始值呈现为表单元素上的数据属性，这样您就不必担心删除格式。

编辑- 这是一种在表单元素中嵌入原始值的方法，因此它很容易被 jQuery 解析

在 Rails 中：

<%= f.text_field :foo, :data => {:price => "12.99"} %>

呈现的 html 如下所示：

<input type="text" name="bill[foo]" id="bill_foo" data-price="12.99" />

用 jQuery 解析这个：

var price = $("#bill_foo").data("price");

希望这可以帮助。

于 2013-03-03T14:20:16.437 回答