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>标签的主要内容,如果未能解决你的问题,请参考以下文章