使用Javascript实现跨域模板

Question

我目前正在构建一个Javascript库，它可以根据媒体文件的网址轻松地创建可嵌入的媒体，然后使用Javascript方法和事件进行控制(想想像Flash / Silverlight JW player这样的东西)。

当然，我可以简单地从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的服务器端解决方案来解决这个问题。假设你在服务器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部分作为模板来“呈现”(这是moustache和类似用法的范例)。

代码很简单--下面是你想要模版的第三方网页区域：

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

在加载knockout js库本身之后，您只需将一些数据以javascript“数据模型对象”的形式呈现给knockout，它就会完成其余的工作：

// 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