jQuery Templates: перенос шаблона из HTML в Javascript код

349

31 января 2017, 23:31

Здравствуйте!

Вопрос по плагину jQuery Templates. Можно ли сам шаблон расположить не в HTML коде, а внутри JavaScript кода?

Например. В классическом варианте выглядит так: HTML:

 <script id="tpl" type="text/x-jquery-tmpl">
        <div class="test">
                <h2>
                    Переменная равна: ${title}
                </h2>
        </div>
    </script>
    <div id="test1"></div>

JS:

       $(function () {
        $("#tpl").tmpl({ "title" : "Hello World" }).appendTo('#test1');
    });

Я не хотел бы в HTML коде страницы иметь шаблоны text/x-jquery-tmpl . Поэтому я перенес шаблонную часть в JS код:

 $(function () {
        $("<div class="test"><h2>Переменная равна: ${title}</h2></div>").tmpl({ "title" : "Hello World" }).appendTo('#test1');
    });

Но возникает ошибка!

Подскажите, пожалуйста, что не так и как можно перенести шаблон из HTML в JavaScript код.

Спасибо!

Answer 1

$("<div class="test"><h2>Переменная равна: ${title}</h2></div>").tmpl({ "title" : "Hello World" }).appendTo('#test1');

Кавычки " надо заменить на ', чтобы двойные внутри строки не приходилось экранировать:

$('<div class="test"><h2>Переменная равна: ${title}</h2></div>').tmpl({ "title" : "Hello World" }).appendTo('#test1');

Но вообще код подозрительный - сначала формируем dom-дерево с шаблонами, а потом отдаём его шаблонизатору - не для этого шаблонизаторы придумывали, ты что-то делаешь не так.