Question

我有一个充满对象的数组，这些对象具有相同的键，但值不同。需要将这些对象转换为具有各种子元素的div。以下代码有效，但看起来很混乱，难以维护。

pim.buildProducts = function(array) {
     // for each item in the array
     productHTML = '';
     compareBoxHTML =   '<div class="checkbox compare">' +
                        '<label data-placement="right" data-toggle="tooltip" title="Add to Compare"><span class="compare-text">Compare</span><input type="checkbox" value="compare"></label>' +
                    '</div>';

     for(i = 0; i < array.length; i++) {
         // build image
         image = '<div class="image"><a href="' + array[i].url + '"><img src="' + array[i].image + '" /></a></div>';

         // build description
         desc = '<div class="desc"><h4><a href="' + array[i].image + '">' + array[i].id + '</a></h4>' +
    '<h5>' + array[i].description + '</h5>';

         // build icons
          icons = '<div class="pim-icons"><a class="cart" href="' + array[i].url + '"><span class="glyphicon glyphicon-shopping-cart"></span></a>';
         if(array[i].catalog) {
             icons += '<a class="file" href="' + array[i].catalog + '"><span class="glyphicon glyphicon-file"></span></a>';
         }
         icons += '</div>';
         productHTML += '<div class="product">' + image + desc + icons + '</div>';
}
     return productHTML;
 };

有更好的方法可以做到这一点，还是我可以追求的其他选择？

谢谢！沃尔特

Answer 1

据我所知，这是最干净的方法。

首先，您应该像这样创建所有html;

int

之后，您应该隐藏父div，并将其克隆到.clone()的对象。之后，您只需更改元素的值，如;

    <div hidden="hidden" id="mainDiv">
    <div class="checkbox compare">   
    <label data-placement="right" data-toggle="tooltip" title="Add to Compare">
        <span class="compare-text">Compare</span>
        <input type="checkbox" value="compare">
    </label>
</div>
<div class="image">
    <a href="">
        <img src="">
    </a>
</div>
</div>

并附加到你想要的地方。

Answer 2

查看document.createElement函数以及所有其他函数进行DOM处理

Answer 3

您可以使用document.createElement和其他DOM方法而不是编写HTML，但这可能比使用HTML字符串更加冗长。

另一个选择是使用像lodash提供的模板函数，这将使HTML更清晰。

JS成为：

pim.buildProducts = function(array) {
  var tplHtml = document.getElementById('productsTpl').innerHTML;
  var tpl = _.template(tplHtml);
  return tpl({ products: array });
}

您可以将模板放在HTML文件中：

<script type="text/template" id="productsTpl">
  <% products.forEach(function(item) { %>   
  <div class="product">
    <div class="image">
      <a href="<%= item.url %>">
        <img src="<%= item.image %>" />
      </a>
    </div>
    <div class="desc">
      <h4><a href="<%= item.image %>"><%= item.id %></a></h4>
      <h5><%= item.description %></h5>
      <div class="pim-icons">
        <a class="cart" href="<%= item.url %>">
          <span class="glyphicon glyphicon-shopping-cart"></span>
        </a>
        <% if (item.catalog) { %>
        <a class="file" href="<%= item.catalog %>">
          <span class="glyphicon glyphicon-file"></span>
        </a>
        <% } %>
      </div>
    </div>
  </div>
  <% }) %>
</script>

根据数组中的数据创建dom元素的干净方法？

3 个答案: