JQuery шаблон загружен с удаленного сервера - PullRequest
2 голосов
/ 28 сентября 2011

Я использую шаблоны jquery в нескольких проектах. Дело в том, что для того, чтобы получить единообразие, я планировал поместить все общие шаблоны на сервер CDN, а затем загрузить их из различных служб с помощью (в голове):

<script id="errorPage" src="http://www.mycdn.com/error-page.html" type="text/x-jquery-tmpl"></script>

Затем (в обработчике готовности страницы) я использую следующий код для визуализации моего шаблона:

$("#errorPage").tmpl("errorPage", {'message': 'Permission denied'}).prependTo("body");

Дело в том ... это не работает!? ничего не отображается ... Я не знаю, возможно ли это вообще. Я очень новичок в jquery-template, поэтому я также могу упустить что-то очевидное !!!

Есть идеи?

Ответы [ 2 ]

1 голос
/ 28 сентября 2011

Вы можете создавать шаблоны во внешних файлах и вызывать их с помощью $.getScript.

Например:

example.html

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script> 
<script>
$(function() {
    $.getScript('./template.js', function(data) { 
        $.tmpl("message", { id:1, msg:"Some Message!" } ).appendTo('#output');
    });
});
</script>
<body>
<div id="output"></div>
</body>

template.js

$.template("message", '<a href="/message/${id}">${msg}</a>');

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

редактирование: По-видимому, вы также можете форсировать html-запросы:

$.get('./template2.js', function(data) { 
    $.template("message2", data);
    $.tmpl( "message2", { id:1, msg:"Some Message!" } ).appendTo('#output');
}, 'html');

template2.js

<p id="script2">
    <a href="/message/${id}">${msg}</a>
</p>

Обратите внимание, что после обратного вызова в $.get я явно указываю 'html'.

1 голос
/ 28 сентября 2011

Как выглядит ваш шаблон?Браузер обрабатывает его как HTML или как JavaScript?Попробуйте поместить его в файл .js или загрузить свои шаблоны в виде строковых переменных в файл javascript.Вместо

<script id="errorPage" src="http://www.mycdn.com/error-page.html" type="text/x-jquery-tmpl"></script>

загрузите некоторый файл .js, который имеет что-то вроде этого:

var errorPage = "<html><body>error: ${message}</body></html>"; //replace with your template
...
$.template( "errorPage", errorPage);

Вы можете иметь один или несколько файлов js с шаблонами, но в качестве источника должен иметь javascript,не html.

ОБНОВЛЕНИЕ после того, как я попробовал ваш сценарий: при загрузке так, как вы пытались, содержимое error-page.html не анализируется как шаблон jquery, и вы получаете пустую переменную errorPage.

...