使用 PHP/HTML 文件作为模板的 Javascript答案

【问题标题】：Javascript using PHP/HTML file as template使用 PHP/HTML 文件作为模板的 Javascript
【发布时间】：2012-10-12 17:40:33
【问题描述】：

我正在使用 Google Maps API v3 创建一个地图应用程序，其中一个部分是呈现的 InfoWindow 的 HTML 布局。目前，我必须在主 map.js 文件中创建一个长变量，而且它很乱，而且很难在不破坏主应用程序的情况下进行编辑，对于没有编写它的人来说，这简直是一场噩梦。

这就是现在的样子：

var html = "<div class=loc-one><div class=loc-name>" + name + "</div><hr class=loc-name-hr></div> <br/><div class=loc-two><div class=loc-two-l><div class=loc-add>" + address1 + "<br/>" + address2 + "<br/>" + address3 +"</div></div><div class=loc-two-r><div class=loc-type><strong>" + type + "</strong></div><div class=loc-price>Price Rating: " + price + "</div></div></div><hr class=loc-name-hr><div class=loc-three><div class=loc-three-times-head><img src=http://sandbox.tristanbacon.me/citymap/img/ui/ui_times.png /><span class=times-head-title>Opening Times</span></div><div class=loc-three-times>" + times + "</div></div><hr class=loc-name-hr><div class=loc-four><li><div class=loc-sec-img><a href=# onclick=TINY.box.show({image:'http://sandbox.tristanbacon.me/citymap/img/" + img_day + "',boxid:'frameless',animate:true,openjs:function(){openJS()}})><img src=http://sandbox.tristanbacon.me/citymap/img/ui/ui_img.png /><span class=loc-four-view>View Image</span></a></div></li></div>";

如您所见，我什至无法在 JS 文件中展开它，因为它会破坏代码。理想情况下，我希望它看起来像这样：

<html>
<div class=loc-one>
<div class=loc-name>
"+ name +"
</div>
<hr class=loc-name-hr>
</div> 
<br/>
<div class=loc-two>
<div class=loc-two-l>
    <div class=loc-add>
    " + address1 + "
    <br/>
    " + address2 + "
    <br/>
    " + address3 + "
    </div>
</div>
<div class=loc-two-r>
    <div class=loc-type>
        <strong>" + type + "</strong>
    </div>
    <div class=loc-price>
        Price Rating: " + price + "
    </div>
</div>
</div>
<hr class=loc-name-hr>
<div class=loc-three>
<div class=loc-three-times-head>
    <img src=http://sandbox.tristanbacon.me/citymap/img/ui/ui_times.png />
    <span class=times-head-title>Opening Times</span>
</div>
<div class=loc-three-times>
    " + times + "
</div>
</div>
<hr class=loc-name-hr>
<div class=loc-four>
<li>
<div class=loc-sec-img>
    <a href=# onclick=TINY.box.show({image:'http://sandbox.tristanbacon.me/citymap/img/" + img_day + "',boxid:'frameless',animate:true,openjs:function(){openJS()}})><img src=http://sandbox.tristanbacon.me/citymap/img/ui/ui_img.png />
    <span class=loc-four-view>View Image</span>
    </a>
</div>
</li>
</div>
</html>

在实际文件中看起来会更干净，因为我必须为 Stackoverflow 编码布局格式化它。不过我相信你已经明白了它的要点。

我想要一个类似于上面的 template.html（或 .php？）文件。是否可以通过这个 HTML 文件传递变量，从 map.js 文件链接到 HTML 文件（如第一次预览中一样），然后让它在实际网站上正常显示？

我希望我已经正确解释了！

谢谢

【问题讨论】：

你真的不应该在 JS 中生成这样的 HTML，否则你会遇到类似的问题。不能用 PHP 渲染视图和 JS 吗？
有许多免费的 PHP 模板引擎可用。将确保页面构建为字符串是疯狂的。
这就是为什么我要改变它！根据 API 文档，这是显示的默认方法。如果你问我，我会感到非常痛苦，而且我什至不是一个程序员！

标签： php javascript html variables google-maps-api-3

【解决方案1】：

你当然可以在 JS 中“展开”一个字符串：

var html = "<html>" + 
"<div class=loc-one>" + 
"<div class=loc-name>" +
name +
"</div>" + 
"<hr class=loc-name-hr>" + 
... etc

您也可以尝试这种方法，但这种方法并未得到普遍支持：

var html = "<html> \
<div class=loc-one>\
<div class=loc-name>\
"+ name +"
</div>\ 
<hr class=loc-name-hr>\
... etc

查看上一个问题：Creating multiline strings in JavaScript

【讨论】：

【解决方案2】：

我认为您最好使用适当（但简单）的模板框架。看看handlebars。使用它，您将在 20 分钟内启动并运行。他们使用的技巧是不在 javascript 变量中定义模板，而是在具有特殊类型属性的脚本块中定义模板，并让模板机制解析脚本块。不要试图自己构建模板的东西，你很快就会把自己画到一个角落里。（至少我有:)）

【讨论】：

这看起来真的很有用 - 我会试一试。谢谢:)
太棒了。如果它对您有用，请确保将答案标记为正确的答案，以便其他人也可以从中受益。编码愉快。