使用Javascript进行跨域模板化

Question

I'm currently building a Javascript library that can be used to easily create embeddable media based on the URL of a media file, and then be controlled using Javascript methods and events (think something like the Flash / Silverlight JW player ).

Of course, i could simply cat all the html tags from the Javascript library and send that to the browser:

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

But i think this is a very ugly practice that tends to create unmanageable code that is unreadable when you review it a few weeks later.

So, a templating solution seems to be the way to go. I've been looking to EJS because it loads the templates using AJAX, so you can manage your templates in separate file instead of directly on the HTML page.

There's one 'gotcha' with that: my library needs to be completely cross-domain: the library itself could be located on foo.com while the serving site could be located on bar.com. So if bar.com would want to add a media player using the library it needs to do an AJAX call to a template located on foo.com, which won't work because of the same-origin policy in browsers.

AFAIK, there's no library that uses something like JSONP to read and write templates to get around this problem.

Could anyone point me to a solution for this problem?

Answer 1

Answering my own question: you need some kind of server-side solution that delivers JSONP to solve this problem. Let's say tou have a template on server foo.com, you could have a server-side script that answers to requests like these:

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

Which would return:

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

Then you can use any template language you want and parse the template in your app.

Answer 2

Very late to this question, but I've come to believe that KnockOut JS is the best solution for third-party template rendering. If you are loading your JS onto a third-party's web pages, Knockout lets you very easily inject your data into their DOM, without having to hold the entire section of HTML as a template which you "render" (this is the paradigm that moustache and similar use).

The code is simple - here's the third party's web page region you want to template:

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

After loading knockout js library itself, you then just present some data to knockout as a javascript "data model object" and it does the rest:

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

References:

• http://knockoutjs.com/documentation/introduction.html
• http://learn.knockoutjs.com/#/?tutorial=intro