Coffeescript：用于连接 HTML <td> 元素的循环

Question

围绕 coffeescript 进行游戏。我有以下 for 循环来连接本机 javascript 中的 html 元素，效果很好。目前我无法从 coffeescript 中获取值 json 数据，即 i.a ， i.b。

//.js file
function createTr(json){
var tr='';
for (var i=0;i<json.data.length;i++){
var data ='<tr><td>' + json.data[i].a + ' - ' + json.data[i].b  +
  '</td>'+
  '<td>' + json.data[i].c +
  '</td>'+
    '<td>' + json.data[i].d +
  '</td>'+
  '</tr>';
tr +=data;
}
return tr;
}

咖啡脚本如下

//.coffeescript
createTr = (json) ->
 tr=''
 tr + '<tr><td>' + i.a  + '-' + i.b+'</td>  <td>'+i.c+'</td><td>'+i.d+'</td></tr>' for i in json.data
 tr

根据下面的 coffeescript javascript 自动生成的源映射

//autogenerated js file from coffeescript file above
createTr = function(json) {
var i, j, len, ref, tr;
tr = '';
ref = json.data;
for (j = 0, len = ref.length; j < len; j++) {
  i = ref[j];
  tr + '<tr><td>' + i.a + '-' + i.b + '</td><td>' + i.c + '</td><td>' + i.d + '</td></tr>';
}
return tr;
};

Answer 1

唯一的区别是缺少作业。 CoffeeScript 版本应该是：

createTr = (json) ->
  tr=''
  tr += '<tr><td>' + i.a  + '-' + i.b+'</td>  <td>'+i.c+'</td><td>'+i.d+'</td></tr>' for i in json.data
  tr

Answer 2

  ##.coffee file
  createTr = (json) ->
    tr = ''
    for item in json.data
      data = """<tr>
        <td>#{item.a}-#{item.b}</td>
        <td>#{item.c}</td>
        <td>#{item.d}</td></tr> """
      tr += data

    return tr

并阅读 http://coffeescript.org/ 关于循环、字符串和字符串中的变量，如 "Some text #{variable}"

Answer 3

我更喜欢在 for 循环创建的数组上使用连接：

createTr = (json) ->
  ('<tr><td>' + i.a  + '-' + i.b+'</td>  <td>'+i.c+'</td><td>'+i.d+'</td></tr>' for i in json.data).join("")

或者有点像@yavor.makc 如果这是我的代码我可能会关注可读性：

createTr = (json) ->
  (for i in json.data
    "
    <tr>
      <td>#{i.a}-#{i.b}</td>
      <td>#{i.c}</td>
      <td>#{i.d}</td>
    </tr>
    "
  ).join("")

Coffeescript：用于连接 HTML <td> 元素的循环

Coffeescript : For loop to concatenate HTML <td> element

javascript

coffeescript