jquery 模板 - 输出到文本区域（或：将 jquery 对象转换为字符串）
我正在编写一个工具，它将根据 JSON 数据生成 HTML，并将输出放在文本区域中以便于复制/粘贴。我正在使用 jquery 模板生成 HTML，但将结果放入文本区域时遇到问题，因为 .tmpl() 返回 jQuery 对象（DOM 元素的集合）。
编辑：
使用更简单的版本进行测试后，我发现 $("#HtmlPageTemplate").tmpl().html();确实有效。所以问题出在实际的模板上。对于使以下模板正常工作有什么建议吗？
<script id="HtmlPageTemplate" type="text/x-jquery-tmpl">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>API - ${ObjectName}</title>
<link rel="stylesheet" href="styles/meyer-reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="scripts/google-code-prettify/src/prettify.css" type="text/css" media="all" />
<link rel="stylesheet" href="jquery-ui-1.8.13.custom/css/smoothness/jquery-ui-1.8.13.custom.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles/api-documentation.css" type="text/css" media="all" />
<script src="jquery-ui-1.8.13.custom/js/jquery-1.5.1.min.js">{{html "</sc"+"ript>"}}
<script src="jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js">{{html "</sc"+"ript>"}}
<script src="scripts/google-code-prettify/src/prettify.js">{{html "</sc"+"ript>"}}
<script>
$(function(){
if ("onhashchange" in window) { // event supported?
window.onhashchange = function () {
SelectTabByAnchor(window.location.hash);
}
}
else { // event not supported:
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
storedHash = window.location.hash;
SelectTabByAnchor(storedHash);
}
}, 100);
}
function SelectTabByAnchor(anchor){
var tab = -1;
if(anchor.substr(0, 10) == "#Property-"){
tab = 0;
}
else if(anchor.substr(0, 8) == "#Method-"){
tab = 1;
}
else if(anchor.substr(0, 7) == "#Event-"){
tab = 2;
}
if(tab > -1){
$("#PropertiesMethodsEventsContainer").tabs("select", tab);
//window.location.href = window.location.hash;
window.location.hash = window.location.hash;
}
}
$("a").click(function(event){
var anchor = $(this).attr("href");
SelectTabByAnchor(anchor);
// Stop the .Item event from showing/hiding the details
event.stopPropagation();
});
$(".Item").click(function(){
$(this).next().toggle();
}).hover(function(){
$(this).addClass("ui-state-hover");
},
function(){
$(this).removeClass("ui-state-hover");
});
prettyPrint();
$("#PropertiesMethodsEventsContainer").tabs();
if(window.location.hash){
//SelectTabByAnchor(window.location.hash);
$("a[href=\"" + window.location.hash + "\"]:first").trigger("click");
}
});
{{html "</sc"+"ript>"}}
</head>
<body>
{{tmpl "#ClassTemplate"}}
</body>
</html>
</script>
I'm writing a tool that will generate HTML based on JSON data, and puts the output in a textarea for easy copy/paste. I am using jquery templates for generating the HTML but I'm having trouble putting the result in the textarea, because .tmpl() returns a jQuery object (collection of DOM elements).
EDIT:
After testing with a simpler version, I found that $("#HtmlPageTemplate").tmpl().html(); does work. So the problem lies with the actual template. Any suggestions on making the following template work?
<script id="HtmlPageTemplate" type="text/x-jquery-tmpl">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>API - ${ObjectName}</title>
<link rel="stylesheet" href="styles/meyer-reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="scripts/google-code-prettify/src/prettify.css" type="text/css" media="all" />
<link rel="stylesheet" href="jquery-ui-1.8.13.custom/css/smoothness/jquery-ui-1.8.13.custom.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles/api-documentation.css" type="text/css" media="all" />
<script src="jquery-ui-1.8.13.custom/js/jquery-1.5.1.min.js">{{html "</sc"+"ript>"}}
<script src="jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js">{{html "</sc"+"ript>"}}
<script src="scripts/google-code-prettify/src/prettify.js">{{html "</sc"+"ript>"}}
<script>
$(function(){
if ("onhashchange" in window) { // event supported?
window.onhashchange = function () {
SelectTabByAnchor(window.location.hash);
}
}
else { // event not supported:
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
storedHash = window.location.hash;
SelectTabByAnchor(storedHash);
}
}, 100);
}
function SelectTabByAnchor(anchor){
var tab = -1;
if(anchor.substr(0, 10) == "#Property-"){
tab = 0;
}
else if(anchor.substr(0, 8) == "#Method-"){
tab = 1;
}
else if(anchor.substr(0, 7) == "#Event-"){
tab = 2;
}
if(tab > -1){
$("#PropertiesMethodsEventsContainer").tabs("select", tab);
//window.location.href = window.location.hash;
window.location.hash = window.location.hash;
}
}
$("a").click(function(event){
var anchor = $(this).attr("href");
SelectTabByAnchor(anchor);
// Stop the .Item event from showing/hiding the details
event.stopPropagation();
});
$(".Item").click(function(){
$(this).next().toggle();
}).hover(function(){
$(this).addClass("ui-state-hover");
},
function(){
$(this).removeClass("ui-state-hover");
});
prettyPrint();
$("#PropertiesMethodsEventsContainer").tabs();
if(window.location.hash){
//SelectTabByAnchor(window.location.hash);
$("a[href=\"" + window.location.hash + "\"]:first").trigger("click");
}
});
{{html "</sc"+"ript>"}}
</head>
<body>
{{tmpl "#ClassTemplate"}}
</body>
</html>
</script>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可能希望显示实际生成的 HTML（如果您正在生成该 HTML）。反正。通过使用
.html()，您始终可以访问任何 jQuery 对象的 HTML 字符串。因此，您可以轻松地执行此操作以在文本区域中获取 jQuery 对象：这应该将生成的 HTML 放入您的
textarea中。这个 JSFiddle 证明它按预期工作。文档就绪功能位于脚本块的末尾（由于我必须添加 jQuery
.tmpl()插件，因此该脚本块相当长）。但它只做了我上面写的事情。它仅根据生成的模板 HTML 设置文本区域值。您可能遇到的问题是，此技术返回 jQuery 元素的内容，在您的情况下，该内容可能为空。如果是这种情况，请使用此代码来获取整个生成的代码模板：
You'd probably like to display the actual generated HTML (if that's what you're generating). Anyway. By using
.html()you can always access HTML string of any jQuery object. Hence you can easily do this to get the jQuery object in your text area:This should put generated HTML inside your
textarea.This JSFiddle proves it works as expected. Document ready functionality is at the end of the script block (which is rather long since I had to add jQuery
.tmpl()plugin). But it only does what I've written above. It only sets text area value based on generated template HTML.The problem you may be having that this technique returns the content of the jQuery element which may in you case be empty. If this is the case, than use this code to get whole generated code template instead: