template-composer
v0.1.5
Published
use multi templates in one page.
Downloads
3
Readme
template-composer
用于方便基于空白模板页面进行开发的express中间件.
安装
npm install template-composer --save功能
默认支持react-engine模板引擎，可以配置以支持其它模板。
它会代理res.render()函数，对其处理后的view代码与空白模板合成，最终返回合成后的页面代码，将包含美团官网的页头、页脚及其它一些基本页面功能，而我们只需要专注完成页面的正文部分即可。
请求的时候url后添加
?__debug__=1可以临时禁用
Middleware Controller
+ +
| |
request | |
+---------------------------------------------------------+
| | |
| | v
| |
+-----+------+ | res.render('partial_view',data);
| | | +
response | | | |
<--------------+ wrapTpl() | <--------------------------+
| | |
| | |
+-----+------+ |
| |
| |
默认的layout模板（内置）
<!DOCTYPE html>
<html $${htmlAttrs}>
<head>
$${pageData.head}
$${headContent}
</head>
<body $${bodyAttrs} $${pageData.bodyAttrs}>
$${pageData.body1}
$${mainContent}
$${pageData.body2}
$${footContent}
</body>
</html>内层view模板示例
var React = require('react');
module.exports = React.createClass({
render: function render() {
// 这里必须 使用<html><body>标签，否则
// ReactEngine会无法判断view是由server端生成还是client端生成，
// 执行时会报错
return (
<html>
<head>
{/* <head>中的代码会放到最终页面的</head>标签前 */}
<link href="test.css" rel="stylesheet" type="text/css" />
{/* 会把empty页面模板中的title去掉，用这个替换 */}
<title> Test Page </title>
</head>
<body>
{this.props.children}
</body>
{/* 需要放到页面代码底部的脚本 */}
<script src='/bundle.js'></script>
</html>
);
}
});用法
var app = express();
// 默认使用react-engine引擎，也可以设置`viewParser`和`template`以适用其它引擎
var templateComposer = require('template-composer')({
// options are optional
url: <template url>,
viewParser: <function>,
template: <string>
});
// 在需要的route前加入中间件调用即可
app.get('/', templateComposer, function(req, res) {
// Use react-engine
res.render('index.jsx', {
title: 'React Engine Express Sample App',
name: 'Jordan'
});
});
调试
如果想临时禁用功能，可以在页面请求上添加查询参数?__debug__=1。
Contribute
npm install
npm test