Question

我正在编写一个基于JSON数据生成HTML的工具，并将输出放在textarea中以便于复制/粘贴。我正在使用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>

Answer 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();

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

1 个答案: