4

我目前正在构建一个 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 之类的东西来读写模板来解决这个问题。

谁能指出我解决这个问题的方法？

4

2 回答 2

3

回答我自己的问题：您需要某种提供 JSONP 的服务器端解决方案来解决这个问题。假设你在服务器 foo.com 上有一个模板，你可以有一个服务器端脚本来响应如下请求：

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

哪个会返回：

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

然后，您可以使用任何您想要的模板语言并在您的应用程序中解析模板。

于 2011-02-09T23:54:21.993 回答
0

这个问题很晚，但我开始相信 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());

参考：

于 2014-10-19T22:31:02.693 回答