用javascript预编译模版,就是动态修改模板文件使之成为一个可用的静态HTML文件。 我平时会使用artTemplate,性能很好而且易上手。
编写模板
使用一个type="text/html"的script标签存放模板:
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} :{{value}}</li>
{{/each}}
</ul>
</script>
渲染模板
var data = {
title: '标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
}
var html = template('test', data)
document.getElementById('content').innerHTML = html
二、使用CoffeeScript
CoffeeScript支持类似于Python的跨行字符串,这样很轻易的就能保持HTML结构的可读性,而不需要使用“+”或者采用拼数组的形式。
str="""
<div class="dialog">
<div class="title">
<img src="close.gif" alt="关闭" />关闭
</div>
<div class="content">
<img src="delete.jpg" alt="" />
</div>
<div class="bottom">
<input id="Button2" type="button" value="确定" class="btn"/>
<input id="Button3" type="button" value="取消" class="btn"/>
</div>
</div>
"""
你描述的比较乱,不过我大概能理解你的意思。
因为没有具体的代码,所以也只能说说思路。
按我的理解,重新描述你现在的问题是:
通过模板渲染,或者 ajax 异步载入的 html 内容,会通过 innerHTML 或者一定的 DOM 操作,插入到文档中。你希望在这段文档碎片插入后,执行一些脚本。但是遇到的问题是:插入的脚本无法执行。
那么我的建议的解决方法有以下几种:
1、第一种方法,通过设置定时检查,来判断内容是否完成载入。
在 {{data.content}} 中放一个 “标识”。例如:
<!-- 你正常的 content 内容 --><p>。。。。。</p>
<!-- 特殊的标识 -->
<span id="a_special_id"></span>
然后在整个页面的脚本中,加一个定时检查器 (下面代码放在整个页面的 head 里):
var flag = false // 一个状态标记,记录需要进行的脚本是否执行过// 用来检查的函数
function check(){
// 如果脚本已执行过,则退出,避免重复执行。
if (flag) return
// 尝试获取 {{data.content}} 中的 “标识”
var obj = document.getElementById('a_special_id')
// 如果获取成功,说明代码已经完成载入
if (obj) {
// 这里放上你想要进行的操作,例如你问题中的:
jQuery(document).ready(function() {
jQuery('.media-frame-content').css("height",winheight)
})
// 设置状态标记,避免脚本重复执行
flag = true
} else {
// 如果代码没有完成载入
// 设置定时器,过一段时间再次检查
setTimeout(check, 100)
}
}
// 开始检查
check()
2、 第二种方法,是针对为什么插入的脚本不能执行来解决的。
一般来说,通过 innerHTML 或者 DOM 方法插入的 script 脚本都不能正常执行。
那么应该在你的模板解析函数中,进行一定的判断处理。
例如 ajax 获得服务器返回的数据后,检查有无 script 块,如果有,则提取其内容,并通过 eval 来执行。
示例代码:
// 伪代码,假设下面是一个通过 ajax 获取 get.php 页面得到返回数据的模式$.ajax('get.php', function(data){
var reg = /<script>([\s\S]+)<\/script>/i // 正则
var sc
if (reg.test(data)) {
sc = data.match(reg)[1] // 提取脚本
data = data.replace(reg, '') // 移除脚本
}
container.innerHTML = data // 将 html 内容输出到当前页面
if (sc) eval(sc) // 如果有脚本,则执行脚本
})
以上,请采纳,请给分。