jQuery模板内的<script>标签

Posted

技术标签:

【中文标题】jQuery模板内的<script>标签【英文标题】:<script> tag inside jquery template 【发布时间】: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>

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

【问题讨论】:

【参考方案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 您可能没有采取正确的方法。将您的代码放在模板之外,包装在函数中,这些函数将您认为在这些脚本模板中需要的变量作为参数。你最终应该得到更简单、更快、更干净的东西。

以上是关于jQuery模板内的<script>标签的主要内容,如果未能解决你的问题,请参考以下文章

在 jquery 中附加 Django 模板标签

模板层

juicer模板引擎使用

Jquery.tmpl

使用 allowEdit 标志在 phonegap 中本地裁剪图像

在 jquery 模板中将 &lt 呈现为文本而不是 < 或 &gt 因为它不是 >