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

Question

Playing around a coffeescript. I have the following for loop to concat a html element in native javascript which works well. At the moment I just couldnt get the value json data ie ia , ib from coffeescript.

//.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;
}

The coffescript is per below

//.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

the source map for the autogenerated javascript from the coffeescript as per below

//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

The only difference is a missing assignment. The CoffeeScript version should be:

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

And read http://coffeescript.org/ about loop, string and variables in string like "Some text #{variable}"

Answer 3

I prefer to use a join on the array that the for loop creates:

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

or kind of like @yavor.makc if it was my code I might focus on readability:

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