Междоменный шаблонизатор с использованием Javascript - PullRequest
Новая
       65

Междоменный шаблонизатор с использованием Javascript

4 голосов
/ 31 марта 2010

В настоящее время я создаю библиотеку Javascript, которую можно использовать для простого создания встраиваемых мультимедийных файлов на основе URL-адреса медиа-файла, а затем управлять ими с помощью методов и событий Javascript (например, Flash / Silverlight JW игрок ).

Конечно, я мог бы просто перехватить все HTML-теги из библиотеки Javascript и отправить их в браузер: 

function player(url) {
    document.write('<object type="foo"><param name="something" value="bar">' + 
    <param name="source" value=" + url + '/></object>');
}

Но я думаю, что это очень уродливая практика, которая приводит к созданию неуправляемого кода, который невозможно прочитать, когда вы просматриваете его несколько недель спустя.

Итак, шаблонное решение, похоже, является подходящим решением. Я искал EJS , потому что он загружает шаблоны с помощью AJAX, поэтому вы можете управлять своими шаблонами в отдельном файле, а не прямо на HTML-странице.

В этом есть одна проблема: моя библиотека должна быть полностью междоменной: сама библиотека может быть расположена на foo.com, а обслуживающий сайт - на bar.com. Поэтому, если bar.com захочет добавить медиаплеер, используя библиотеку, он должен выполнить AJAX-вызов шаблона, расположенного на foo.com, который не будет работать из-за политики одинакового происхождения в браузерах.

AFAIK, нет библиотеки, которая использует что-то вроде JSONP для чтения и записи шаблонов, чтобы обойти эту проблему.

Может ли кто-нибудь указать мне решение этой проблемы?

Ответы [ 2 ]

3 голосов
/ 10 февраля 2011

Отвечая на мой собственный вопрос: вам нужно какое-то серверное решение, которое предоставляет JSONP для решения этой проблемы. Допустим, у вас есть шаблон на сервере foo.com, у вас может быть серверный скрипт, который отвечает на такие запросы: 

http://foo.com/template/bar.html?callback=cb

Что вернет: 

cb({
    "html" : "<p>i'm a template!</p>"
});

Затем вы можете использовать любой язык шаблона и анализировать шаблон в вашем приложении.

0 голосов
/ 20 октября 2014

Очень поздно к этому вопросу, но я пришел к выводу, что KnockOut JS - лучшее решение для рендеринга сторонних шаблонов. Если вы загружаете свой JS на сторонние веб-страницы, Knockout позволяет вам очень легко внедрить ваши данные в их DOM без необходимости хранить весь раздел HTML как шаблон, который вы «визуализируете» (это парадигма и аналогичное использование).

Код прост - вот регион сторонней веб-страницы, который вы хотите шаблонировать: 

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

После загрузки самой библиотеки jockout js вы просто представляете некоторые данные для нокаута как javascript «объект модели данных», а он делает все остальное: 

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

Ссылки:

...