grunt-cmd-template
v0.0.3
Published
Precompile templates to commonjs modules.
Downloads
3
Maintainers
l3auReadme
将HTML模版转成CMD模块
配置grunt task
grunt.initConfig({
template: {
options: {
prettify: true,
provider: 'underscore',
templateSettings: {
}
},
all: {
files: [{
expand: true,
cwd: 'src',
src: ['test/*.html'],
dest: 'build',
ext: '.js'
}]
},
compile: {
options: {
prettify: false
},
files: {
'build/tmpl/detail.js': ['src/tmpl/detail.html']
}
}
}
});HTML template
<!DOCTYPE html>
<html>
<head>
<meta charset="<%= doc.charset %>">
<title><%= doc.title %></title>
</head>
<body>
<p>Now: <%= format(time) %></p>
<ul>
<% for (var i = 0; i < list.length; i++) { %>
<% var content = list[i]; %>
<li><%= content %></li>
<% } %>
</ul>
</body>
</html>Compile
seajs.use('tmpl/content', function(ContentTmpl){
var data = {
doc: {
charset: 'utf-8',
title: 'DOCUMENT',
},
time: 1405959866384,
format: function (time) {
var d = new Date(time);
return d.toJSON().replace(/T/,' ').replace(/\.\w+/,'');
},
list: [
'item1', 'item2', 'item3'
]
};
var html = ContentTmpl.render(data);
});Result html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOCUMENT</title>
</head>
<body>
<p>Now: 2014-07-21 16:24:26</p>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</body>
</html>