Эффективный способ управления информационным окном html-код

Question

Я работаю над проектом на основе API Карт Google v3 уже более года. Было много и много изменений в информации, отображаемой в информационном окне.

Я ищу более эффективный способ управления кодом html, отличным от строковой. Есть идеи?

var tabA = "" + 
    '<div class="iw_field"><div class="iw_label">NAME</div>'+ 
    '<div class="iw_data">'+c[i].pName+'</div></div>' + 
    '<div class="iw_field"><div class="iw_label">CORPORATION</div>'+ 
    '<div class="iw_data">'+c[i].corp+'</div></div>' + 
    '<div class="iw_field"><div class="iw_label">INDUSTRY</div>'+ 
    '<div class="iw_data">'+c[i].industry+'</div></div>'+ 
    "<div style='text-align: center;'>"+ 
    "<button class='btn btn-info' onclick='retriveCustomerOf(\""+c[i].num+"\")'>Customers</button>" + 
    "<button class='btn btn-info' onclick=''>Prospects</button>"+ 
    "</div>"; 

var tabB = "" + 
    '<div class="iw_field" style="border-bottom: 0px"><div class="iw_label">SALES VOLUME</div>'+ 
    '<div class="iw_data">$'+dollarFormat(c[i].statA)+'</div></div>' + 
    '<table style="border-top: 1px solid #aaaaaa;"><tr><td>'+ 
    '<div class="iw_field"><div class="iw_label">GM</div><div id="" class="iw_data">$'+dollarFormat(c[i].statB)+'</div></div>'+ 
    '<div class="iw_field"><div class="iw_label">OPAT</div><div id="" class="iw_data">$'+dollarFormat(c[i].statC)+'</div></div>'+ 
    '<div class="iw_field"><div class="iw_label">ROI</div><div id="" class="iw_data">'+dollarFormat(c[i].statD)+'%</div></div>'+ 
    '</td><td>'+ 
    '<div class="iw_field"><div class="iw_label">GM RANK</div><div id="" class="iw_data">'+c[i].statE+'</div></div>'+ 
    '<div class="iw_field"><div class="iw_label">OPAT RANK</div><div id="" class="iw_data">'+c[i].statF+'</div></div>'+ 
    '<div class="iw_field"><div class="iw_label">ROI RANK</div><div id="" class="iw_data">'+c[i].statG+'</div></div>'+ 
    '</td></tr></table>'; 

var tabC = ""+ 
    '<div class="iw_field" style="border-bottom: 0px"><div class="iw_label">SERVICE REGION</div>'+ 
    '<div class="iw_data">'+c[i].area+'</div></div>' + 
    '<table style="border-top: 1px solid #aaaaaa;"><tr><td>'+ 
    '<div class="iw_field"><div class="iw_label">PLACE 1</div><div id="" class="iw_data">$'+dollarFormat(c[i].p1)+'</div></div>'+ 
    '<div class="iw_field"><div class="iw_label">PLACE 2</div><div id="" class="iw_data">$'+dollarFormat(c[i].p2)+'</div></div>'+ 
    '</td><td>'+ 
    '<div class="iw_field"><div class="iw_label">PLACE 3</div><div id="" class="iw_data">$'+dollarFormat(c[i].p3)+'</div></div>'+ 
    '<div class="iw_field"><div class="iw_label">PLACE 4</div><div id="" class="iw_data">$'+dollarFormat(c[i].p4)+'</div></div>'+ 
    '</td></tr></table>'; 

var windowContent = "<div id='infowindow' class='company'>" + 
    "<span class='header'>"+c[i].cName+" (#"+c[i].num+")</span>" + 
    "<div class='tabs'>" + 
    "<ul>" + 
    "<li><a href='#tab_1' onclick='selectedTab = 0'><span>A</span></a></li>" + 
    "<li><a href='#tab_2' onclick='selectedTab = 1'><span>B</span></a></li>" + 
    "<li><a href='#tab_3' onclick='selectedTab = 2'><span>C</span></a></li>" + 
    "</ul>" + 
    "<div id='tab_1'>"+tabA+"</div>" + 
    "<div id='tab_2'>"+tabB+"</div>" + 
    "<div id='tab_3'>"+tabC+"</div>" + 
    "</div>" + 
    "<div style='text-align: right;'>"+ 
    "<button class='btn btn-primary' onclick='toggleRings(new google.maps.LatLng("+c[i].latitude+","+companies[i].longitude+"));'>Rings</button>" + 
    "<button class='btn btn-primary' onclick='zoom("+c[i].latitude+", "+c[i].longitude+", 9)'>Zoom</button>"+ 
    "</div></div>"; 

Это не может быть лучшей практикой для управления этим кодом. Пожалуйста, сохраните мое здравомыслие.

Answer 1

Зайдите в библиотеку шаблонов js. Я использовал Embedded Javascript и был доволен результатами.