您的位置：首页 > Web前端 > JavaScript

javascript模板引擎 ICanHaz

2013-10-09 15:19 337 查看

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。下面是一个例子供参考：

登录模板：

<html>
<head>
<script type="text/html" id="login_content">
<![CDATA[
<div class="content well">
<form class="form-horizontal">
<fieldset>
<legend>Login to an Server</legend>
<div class="control-group">
<label class="control-label">Username</label>
<div class="controls"><input type="text" id="login_username" placeholder="Username"/></div>
</div>
<div class="control-group">
<label class="control-label">Password</label>
<div class="controls"><input type="password" id="login_password" placeholder="Password"/></div>
</div>

<div class="control-group">
<div class="controls">
<button class="btn" type="button">Login</button>
</div>
</div>
</fieldset>
</form>
</div>
]]>
</script>
</head>
</html>

HTML代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="js/ICanHaz.js"> </script>
<script type="text/javascript" src="js/bootstrap.js"> </script>

<script type="text/javascript">
var login;

var Login = function () {
/* Panes */
this.templates="logintemplate.xml";
this.paneName="Login";
}

Login.prototype = {
show : function(content) {
var mycontent = $(ich.login_content());
content.empty().append(mycontent);
},
}

function loadTemplates(pane) {
console.log("Loading templates: "+pane.templates);
$.get(pane.templates, function(response) {
console.log("got a response");
console.log(response);
$('script',response).each(function () {
console.log("Got "+this.getAttribute("id"));
console.log($(this).text());
ich.addTemplate(this.getAttribute("id"),$(this).text());
});
pane.show($('#c_content'));
})
}

function register(pane) {
loadTemplates(pane);
}

(function() {
login = new Login();
$(document).ready(function(){register(login)});
})();
</script>

</head>
<body>
<div class="container" id="c_content"></div>
</body>
</html>

备注：本文没有说明数据是如何传递入模板的，下篇文章将实现一个数据传递入模板的例子。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航