Question

在使用Google脚本开发的Web应用程序中，我想显示一个带有标题，描述，发起者，状态等的想法列表。信息存储在称为“想法”的对象数组中

在索引文件中，我有一个表。

<table>
    <thead>
    </thead>
    <tbody id="listOfIdeas">
    </tbody>
</table>

在javascript文件中，我遍历“想法”，并且每次附加一个字符串时，都会在其中插入要显示的数组中的各种信息

for (var i=0;i<ideas.length;i++){
$('#listOfIdeas')
  .append('<tr class="border-bottom shadow-down">'+
          '<td class="idea d-none">'+ideas[i].ideaNumber+'</td>'+
          '<td class="p-1">'+
              '<div class="main-cell p-1">'+
                  '<div><strong>'+ideas[i].title+'</strong>'+
                  '</div>'+
                  '<div class="desc" style="word-break:break-word;">'+ideas[i].description+
                  '</div><br>'+
                  '<div class="creatorInfo"><i><span class="founder">'+ideas[i].initiator+'</span>, '+
                          '<span>'+ideas[i].department+'</span>, '+
                          '<span class="heart far fa-thumbs-up"></span>'+
                          '<span class="score">'+ideas[i].count+'</span></i>, '+
                          '<span class="msg far fa-envelope"></span>'+
                  '</div>'+
                  '<div class="tags">'+
                  '</div>'+
                  '<div class="application">'+
                      '<span class="badge badge-info status"></span>'+
                      '<button class="float-right app-part d-none">Participate</button>'+
                  '</div>'+
              '</div>'+                          
          '</td>'+
          '</tr>')

我的问题是，由于我想添加新功能（带有带有按钮的小菜单），因此字符串的可读性将越来越低。

是否有“更清洁”的方式进行？我觉得可以将模板添加到索引文件中，并用不同的值复制几次，但是我不清楚这是否是最佳解决方案。

Answer 1

我将使用反引号使用es6模板文字

for (var i = 0; i < ideas.length; i++){
$(#listOfIdeas)
  .append(`<tr class="border-bottom shadow-down">
          <td class="idea d-none">${ideas[i].ideaNumber}</td>
          <td class="p-1">
              <div class="main-cell p-1">
                  <div><strong>${ideas[i].title}</strong>
                  </div>
                  <div class="desc" style="word-break:break-word;">${ideas[i].description}
                  </div><br>
                  <div class="creatorInfo"><i><span class="founder">${ideas[i].initiator}</span>, 
                          <span>${ideas[i].department}</span>, 
                          <span class="far fa-thumbs-up"></span>
                          <span class="score">${ideas[i].count}</span></i>, 
                          <span class="msg far fa-envelope"></span>
                  </div>
                  <div class="tags">
                  </div>
                  <div class="application">
                      <span class="badge badge-info status"></span>
                      <button class="float-right app-part d-none">Participate</button>
                  </div>
              </div>                          
          </td>
          </tr>`)
}

如何使用不同的值多次加载相同的html

1 个答案: