使用Javascript進行跨域模板化

Question

我目前正在構建一個Javascript庫，可以用來根據媒體文件的URL輕松創建可嵌入媒體，然后使用Javascript方法和事件進行控制（想想像Flash / Silverlight JW播放器一樣 ）。

當然，我可以簡單地從Javascript庫中獲取所有html標簽並將其發送到瀏覽器：

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想要使用該庫添加媒體播放器，則需要對位於foo.com上的模板進行AJAX調用，由於瀏覽器中的同源策略，該模板無法工作。

AFAIK，沒有庫使用類似JSONP的東西來讀寫模板來解決這個問題。

誰能指點我解決這個問題？

Answer 1

回答我自己的問題：你需要某種服務器端解決方案來提供JSONP來解決這個問題。 假設tou在服務器foo.com上有一個模板，你可以有一個服務器端腳本來回答這些請求：

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

哪個會回歸：

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

然后，您可以使用所需的任何模板語言並在應用程序中解析模板。

Answer 2

這個問題已經很晚了，但我開始相信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>

在加載knockout 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());

參考文獻：

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