jQuery模板内的<script>标签答案

【问题标题】：<script> tag inside jquery templatejQuery模板内的<script>标签
【发布时间】：2011-06-14 21:11:25
【问题描述】：

背景：

我有这个模板，其中包含来自 youtube 的视频正在加载 swfobject。

问题：

有没有办法包含脚本标签...

<script type="text/javascript">
</script>

在 jQuery 模板中？？

<script id="filaVideoTemplate" type="text/x-jQuery-tmpl">
    <!-- Some HTML here -->
    <script type="text/javascript">
        <!-- Some javascript here -->
    </script>
</script>

显然它不能直接工作，有没有办法在没有其他脚本中的脚本的情况下实现同样的事情？

【问题讨论】：

标签： javascript ajax jquery-templates script-tag

【解决方案1】：

不知道你在问什么，但是：您可以使用 ajax 请求并将您的模板放入 (js) 文件中。我的 template_script.js 像这样使用 ajax：

$('the element').load('template_script.js').then( OK , fail );

function OK(){
  do something if request was ok.
}

function fail(){
  do something if request was not ok.
}

【讨论】：

【解决方案2】：

<script id="filaVideoTemplate" type="text/x-jQuery-tmpl">
   <!-- Some HTML here -->  
</script>



var data = [{ 'Id': '1', 'Name': 'a' }, { 'Id': '2', 'Name': 'b' }, { 'Id': '3', 'Name': 'c'}];

var renderedHtml = $('<div />').html($('#filaVideoTemplate').tmpl(data)).append(('<script type="text/javascript"><!-- Some javascript here --></endScript>').replace(/endScript/g, 'script')).html();

如果数据是单一的而不是上面代码的集合是正确的。 else (data is collection) 用于绑定多次的脚本标签（data.length 次）。

【讨论】：

【解决方案3】：

Ronny Wang 的回答为我的问题提供了一个很好的起点。但是，他的解决方案对我不起作用——jQuery 模板正文中的 .. 标记导致我的 MVC3 Razor 视图页面出现问题。

幸运的是，我偶然发现了一个可行的解决方案（详情@@@https://github.com/jquery/jquery-tmpl/issues/94），只需要稍作改动。这是 Ronny 的答案，但有一个应该使其与 MVC3 兼容的修复：

<script id="filaVideoTemplate" type="text/x-jQuery-tmpl">
    <!-- Some HTML here -->
    <scr{{= ""}}ipt type="text/javascript">
        <!-- Some javascript here -->
    </scr{{= ""}}ipt>
</script>

看起来开始和结束标签都只需要分解。希望这会有所帮助！

【讨论】：

【解决方案4】：

<script id="filaVideoTemplate" type="text/x-jQuery-tmpl">
    <!-- Some HTML here -->
    <script type="text/javascript">
        <!-- Some javascript here -->
    {{html "</sc"+"ript>"}}
</script>

你可以用 {{html ""+"ript>"}} 替换

【讨论】：

【解决方案5】：

不确定这是否是唯一方法，但您可以将脚本作为模板的原始 HTML 插入：

<script id="filaVideoTemplate" type="text/x-jQuery-tmpl">
    <!-- Some HTML here -->
    {{html innerScript}}
</script>

然后：

var innerScript = '<script type="text/javascript"><!-- Some javascript here --></script>';
$('#filaVideoTemplate').tmpl({innerScript: innerScript});

【讨论】：

不错，但脚本并不简单，我不想将脚本作为变量，这正是我首先使用模板的原因
@Carlos，是的，它本质上是在回避整个模板引擎。你为什么不把脚本作为外部 JS 文件呢？
因为模板中每个项目的脚本都不同，所以它是从 json 调用的结果动态生成的。
@Carlos，模板化 javascript 听起来是个坏主意。如果是javascript，为什么不能将json数据作为参数传递呢？
@Carlos 您可能没有采取正确的方法。将您的代码放在模板之外，包装在函数中，这些函数将您认为在这些脚本模板中需要的变量作为参数。你最终应该得到更简单、更快、更干净的东西。