javascript - 如何将详细信息行限制为 10？

Question

我关注 Ryan's tutorial通过 Javascript 添加主从行:

def sheet_add_row_link(form_builder)
  link_to_function "Add" do |page|
    form_builder.fields_for :sheet_details, SheetDetail.new, :child_index => 'NEW_ROW' do |f|
      html = render(:partial => 'sheet_detail', :locals => { :df => f })
      page << "$('sheet_details').insert({ bottom: '#{escape_javascript(html)}'.replace(/NEW_ROW/g, new Date().getTime()) });"
    end
  end
end

如何将最大行数限制为 10，而不是无限制？

更新，详细部分代码，_sheet_detail.html.erb:

<div class='sheet_detail'>      
    <div class='<%= 'detail_row_' + @view_row.to_s %>'>
      <div id='detail_model'> <%= df.select :model, models %> </div>
      <div id='detail_quantity'>  <%= df.text_field :quantity %> </div>
    </div>

    <div style="clear:both;"></div>     
</div>

如果我输入:

page << "if($$("sheet_detail").length < 5) {$('sheet_details').insert({ bottom: '#{escape_javascript(html)}'.replace(/NEW_ROW/g, new Date().getTime()) })};"

它返回错误:

/!\ FAILSAFE /!\  Mon May 02 22:18:22 +0800 2011
  Status: 500 Internal Server Error
  sample/app/helpers/sheets_helper.rb:7: syntax error, unexpected tIDENTIFIER, expecting kEND
...  page << "if($$("sheet_detail").length < 5) {$('sheet_detai...
                              ^

Answer 1

您可以在 JavaScript 中添加一个条件，在调用 insert 之前检查行数:

page << "if(lessThanTenRows) { $('sheet_details').insert({ bottom: '#{escape_javascript(html)}'.replace(/NEW_ROW/g, new Date().getTime()) })};"

由于您已经在使用 jQuery，因此您可以通过获取检查行数的 DOM 查询的长度来找到当前行数(例如，通过行使用的特定类等)。

示例

var lessThanTenRows = $$("someRowSpecificClass").length < 10

someRowSpecificClass 是您要在每一行上定义的 CSS 规则(通过每一行的 HTML 中的 class=)。

我会尝试找到一种方法使生成的 JavaScript 更具可读性，但解决方案的重要部分是计算从 DOM 查询中获得的结果数。