Jquery 为rails应用程序调整Coffeescript

我有一个应用程序，其中用户添加了一个

student\u组

，其中他们声明了该组中有多少

student

。我正在尝试将js（我通过js2coffee.org将其改为coffeescript）用于我的应用程序，但我以前从未学习或使用过js，所以我遇到了一些麻烦。谢谢你的帮助

student_groups.js.coffee

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
# 
# https://stackoverflow.com/questions/15130587/jquery-add-or-remove-table-row-based-on-inputs

emptyRow = ->
  row_i++
  @obj = $("<tr></tr>")
  @obj.append "<td><input type=\"text\" size=\"5\" value=\"" + row_i + "\"/></td>"
  @obj.append "<td><input type=\"text\" size=\"5\" name=\"mm" + row_i + "\" id=\"id_mm" + row_i + "\"\"/></td>"
  @obj.append "<td><input type=\"text\" size=\"5\" name=\"dd" + row_i + "\" id=\"id_dd" + row_i + "\"\"/></td>"
  @obj.append "<td><input type=\"text\" size=\"5\" name=\"ma" + row_i + "\" id=\"id_ma" + row_i + "\"\"/></td>"
  @obj.append "<td><input type=\"text\" size=\"5\" name=\"sr" + row_i + "\" id=\"id_sr" + row_i + "\" value=\"0\"\"/></td>"
# how many applications we have drawed now ?
refresh = (new_count) ->
  if new_count > 0
    $("#nos_header").show()
  else
    $("#nos_header").hide()
  old_count = parseInt($("tbody").children().length)
# the difference, we need to add or remove ?
  rows_difference = parseInt(new_count) - old_count
# if we have rows to add
  if rows_difference > 0
    i = 0

  while i < rows_difference
      $("tbody").append (new emptyRow()).obj
      i++
  else if rows_difference < 0 # we need to remove rows ..
    index_start = old_count + rows_difference + 1
    $("tr:gt(" + index_start + ")").remove()
    row_i += rows_difference
row_i = 0
$(document).ready ->
  $("#nos").change ->
    refresh $(this).val()

最后，“学生/表格”

<tr id="nos_header" style="display:none">
  <td><%= f.text_field :name, placeholder: "..." %></td>
  <td><%= f.select :gender, ['Female', 'Male', 'Transgender'] %></td>   
</tr>

编辑：@mu，为了回应您的评论：（1）修复了格式，尽管输入框和输出之间几乎没有关系。我已经阅读了关于格式化文本/代码的文档，但是仍然没有点击，很明显。道歉。（2） 拿出那张打开的标签-想一想那一定是换衣服前的遗留物。谢谢你指出这一点。（3） 至于什么不起作用-我应该更清楚。我的目标是实现与我最初链接到的页面上类似的功能。当用户输入学生人数时，coffeescript应该输入并显示适当数量的字段，以便输入这么多的新学生。然而，目前，这并没有发生。我在浏览器中没有发现任何错误（即，其他一切都正常），但当我选择学生人数时，页面上没有任何变化。谢谢你的帮助

首先，js2coffee制作的“咖啡脚本”正如预期的那样，是非常糟糕的咖啡脚本。很明显，一个软件只是从一种语言翻译到另一种语言，而不了解代码的真正用途。如果你打算进行任何web开发，我强烈建议你学习JavaScript（如果需要，还可以学习CoffeeScript）

现在进入代码。函数分解很好，但函数内部的内容过于复杂

您不需要跟踪全局变量中的

row_i

，甚至不需要跟踪它，因为您可以随时计算所需的索引；所以我们把它扔掉，假装它从未发生过

您的主HTML应该更像这样：

<table class="student_input_form">
    <thead>    
        <tr>
            <th>Name</th>
            <th>Gender</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

emptyRow = (row_i) ->
    """
        <tr>
            <td><input type="text" size="5" value="#{row_i}"></td>
            ...
        </tr>
    """

这实际上是可读的，不像一大堆转义引号和字符串串联。您还可以使用分部填充要用作模板的

，该模板提供：

<!-- Your partial would go inside... -->
<script id="empty_row" type="text/x-template">
    <tr>
        <td><input type="text" size="5" value="{row_i}"></td>
        <td><input type="text" size="5" name="mm{row_i}" id="id_mm{row_i}"></td>
    </tr>
</script>

我想，一个真正的客户端模板解决方案会更好，但对于这样的简单情况，只需简单的正则表达式修改即可

刷新

功能也可以大大简化。如果要多次使用jQuery选择器，请只计算一次并将其保存在变量中，从而简化您的工作：

$tbody = $('.student_input_form tbody');

上面的HTML结构可以很容易地计算出当前有多少行：

current_rows = $tbody.find('tr').length

我们得到了作为参数需要的数量：

refresh = (need_rows) ->

如果我们需要添加新行，那么您可以使用一个简单的循环和一个范围数组：

if(current_rows < need_rows)
    $tbody.append(emptyRow(i)) for i in [current_rows ... need_rows]

我们仍然需要进行

-1

调整，但这就是生活

结果是很好的和精益的：

refresh = (need_rows) ->
    $tbody = $('.student_input_form tbody')
    current_rows = $tbody.find('tr').length

    if(current_rows < need_rows)
        $tbody.append(emptyRow(i)) for i in [current_rows ... need_rows]
    else if(current_rows > need_rows)
        $tbody.find("tr:gt(#{need_rows - current_rows - 1})").remove()

请注意，调用在此处，以便

刷新

可以假定

需要行

是一个数字。还请注意，使用显式基数参数调用

parseInt

，在使用

parseInt

时，始终指定显式基数，这样就不会出现八进制惊喜和类似的混乱

欢迎您将我的版本与您的原始版本进行比较，以查看错误所在

演示：

---

一些教训：

当你不明白别人的代码是如何工作的时候，不要使用它

如果你要写CoffeeScript，就要学习CoffeeScript并在CoffeeScript上写代码。忘了像js2coffee这样的翻译工具是存在的，它们对你没有什么好处

了解你的工具是如何工作的。CoffeeScript和jQuery中有很多有用的东西，可以使代码更紧凑、更容易理解

---

（1） 清理格式和缩进，使代码可读。（2） 您不能将

放在

中，因此在

前面有一个隐式的

，您可能希望将其显式化。（3） 问题是什么？有些东西不起作用吗？在这种情况下，“不起作用”是什么意思？@muistooshort，参见编辑。谢谢，mu。我从另一个问题中得到了答案（我刚刚废弃了coffeescript，因为我可以看出它转换得不好——正如您所说，转换工具并不能替代您所做的：p）。为你的帮助干杯，我真的很感激！我会比较这两个，但我已经看到你是对的-咖啡脚本是如此精简！

if(current_rows < need_rows)
    $tbody.append(emptyRow(i)) for i in [current_rows ... need_rows]

else if(current_rows > need_rows)
    $tbody.find("tr:gt(#{need_rows - current_rows - 1})").remove()

refresh = (need_rows) ->
    $tbody = $('.student_input_form tbody')
    current_rows = $tbody.find('tr').length

    if(current_rows < need_rows)
        $tbody.append(emptyRow(i)) for i in [current_rows ... need_rows]
    else if(current_rows > need_rows)
        $tbody.find("tr:gt(#{need_rows - current_rows - 1})").remove()

$(document).ready ->
    $("#nos").change ->
        refresh(parseInt($(@).val(), 10))