配列からのデータに基づいてdom要素を作成するきれいな方法は？

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

を処理するためのdocument.createElement機能とすべての他の人に見てください。

もう1つの選択肢は、lodashが提供するようなテンプレート関数を使用することです。これは、HTMLをよりクリーンにします。

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

そして、あなたはあなたのHTMLファイルにテンプレートを置くことができます：：

JSはなり私の知る限り、これはそれを行うためのクリーンな方法である知っているように

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

Answer 2

は、あなたが代わりに書き込みHTMLのdocument.createElementや他のDOMメソッドを使用することができますが、それは、さらに詳細なHTML文字列を使用するよりかもしれDOMは

Answer 3

。

まず、このようにすべてのhtmlを作成する必要があります。その後

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

あなたは親のdivを非表示にする、と.clone()でオブジェクトにクローンを作成する必要があります。その後、単に要素の値を変更するだけです。

<script> 
function fillData(array) 
{ 
    for(var i ; i<array.length;i++) 
    { 
     var element = $("#mainDiv").clone(); 
     element.attr("hidden",""); 
     element.find("img").attr("id",array[i].url); 
     $(document).append(element); 
    } 
} 
</script> 

あなたが好きな場所に追加してください。