jquery 模板 - 输出到 textarea（或：将 jquery 对象转换为字符串）答案

【问题标题】：jquery template - output to textarea (or: converting jquery object to string)jquery 模板 - 输出到 textarea（或：将 jquery 对象转换为字符串）
【发布时间】：2011-09-18 11:26:43
【问题描述】：

我正在编写一个工具，它将基于 JSON 数据生成 HTML，并将输出放在文本区域中以便于复制/粘贴。我正在使用 jquery 模板来生成 HTML，但我无法将结果放入 textarea，因为 .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>

【问题讨论】：

标签： jquery string templates dom jquery-templates

【解决方案1】：

您可能希望显示实际生成的 HTML（如果这是您正在生成的内容）。反正。通过使用.html()，您始终可以访问任何 jQuery 对象的 HTML 字符串。因此，您可以轻松地在文本区域中获取 jQuery 对象：

$("#textareaID").val($("#templateID").tmpl(objToUse).html());

这应该将生成的 HTML 放入您的 textarea。

This JSFiddle 证明它按预期工作。文档就绪功能位于脚本块的末尾（这是相当长的时间，因为我不得不添加 jQuery .tmpl() 插件）。但它只做我上面写的。它仅根据生成的模板 HTML 设置文本区域值。

您可能遇到的问题是，此技术返回 jQuery 元素的内容，在您的情况下可能为空。如果是这种情况，请使用此代码来获取整个生成的代码模板：

$("#TimingTemplate").tmpl().wrap("<div></div>").parent().html();

【讨论】：

这是我第一次尝试的。 $("#HtmlPageTemplate").tmpl().html();返回 null，即使 $("#HtmlPageTemplate").tmpl() 确实返回了一个有效的 jQuery 对象。
@Brett：我刚试了一下，效果很好。让我举个例子。
@Brett：检查我编辑的答案并添加指向工作示例的链接。所以我想你的模板很可能有问题。
谢谢罗伯特，我用一个更简单的版本进行了测试，它似乎是模板的问题......编辑的问题。有什么建议？感谢您的帮助。
@Brett：您能检查一下我添加到答案中的解决方案吗？我不确定它是否适用于你的情况，因为你有一个完整的 HTML 文档作为你的模板，但它仍然可以工作......