jquery template - вывод в textarea (или: преобразование объекта jquery в строку) - PullRequest
Новая
       21

jquery template - вывод в textarea (или: преобразование объекта jquery в строку)

1 голос
/ 20 июня 2011

Я пишу инструмент, который будет генерировать HTML на основе данных JSON и помещает вывод в текстовую область для простого копирования / вставки. Я использую шаблоны jquery для генерации HTML, но у меня возникают проблемы при помещении результата в текстовую область, потому что .tmpl () возвращает объект jQuery (набор элементов DOM).

EDIT:

После тестирования с более простой версией я обнаружил, что $ ("# 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>

1 Ответ

2 голосов
/ 20 июня 2011

Вы, вероятно, хотели бы отобразить фактический сгенерированный HTML (если это то, что вы генерируете).Тем не мение.Используя .html(), вы всегда можете получить доступ к строке HTML любого объекта jQuery.Следовательно, вы можете легко сделать это, чтобы получить объект jQuery в вашей текстовой области: 

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

Это должно поместить сгенерированный HTML в вашу textarea.

This JSFiddle доказывает, что работает как ожидалось.Функциональность готового документа находится в конце блока скрипта (что довольно долго, так как мне пришлось добавить плагин jQuery .tmpl()).Но он делает только то, что я написал выше.Он устанавливает значение текстовой области только на основе сгенерированного шаблона HTML.

Проблема, с которой вы можете столкнуться, заключается в том, что этот метод возвращает содержимое элемента jQuery , которое в вашем случае может быть пустым.Если это так, используйте этот код для получения всего сгенерированного шаблона кода: 

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