// 入口文件 index.js
var CandyJs = require('candyjs');
var Candy = require('candyjs/Candy');
var App = require('candyjs/web/Application');

// 由于 candyjs 的模板采用别名路径
// 默认别名路径并不包含 node_modules 所以这里添加一下 方便引入模板引擎
Candy.setPathAlias('@template', __dirname + '/node_modules');

new CandyJs(new App({
    'id': 1,
    'debug': true,
    'appPath': __dirname + '/app',
    // 使用别名路径指定使用的模板引擎
    'defaultView': 'template/@candyjs/template-hbs/index'

})).listen(2333, function(){
    console.log('listen on 2333');
});


// app/controllers/index/IndexController.js
var CandyJs = require('candyjs');
var Controller = require('candyjs/web/Controller');

module.exports = class IndexController extends Controller {
    run(req, res) {
        // 渲染 index 模板
        this.render('index', {
            age: 20
        })
    }
}


// app/views/index/index.html
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>view demo</title>
</head>
<body>
    {{ age }}
</body>
</html>

布局文件的使用

大部分时候网站布局都有一部分保持不变的结构，比如头部导航，底部 footer ，这部分比较固定，可以利用布局文件将这部分逻辑进行抽离，避免重复布局

使用布局文件很简单，只需要编写一个布局文件并修改控制器部分即可

// app/controllers/index/IndexController.js
var CandyJs = require('candyjs');
var Controller = require('candyjs/web/Controller');

module.exports = class IndexController extends Controller {
    run(req, res) {
        this.getView().title = 'layout demo';
        this.getView().enableLayout = true;

        this.render('index', {
            age: 20
        });
    }
}


// app/views/layout.html
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ $this.title }}</title>
</head>
<body>
    <nav>layout page header</nav>

    <!-- 由于 contentHtml 包含 html 标签 所以使用三个大括号解析内容 -->
    {{{ contentHtml }}}

    <footer>layout page footer</footer>
</body>
</html>


// app/views/index/index.html
// 可见现在的模板文件已经没有了 html 文档结构
// 取而代之的是一个文档片段 这个片段将会替换布局文件的 contentHtml
<div>{{ age }}</div>

布局文件补充

由上面代码可见，布局文件默认放到了 app/views 目录中，并起名 layout.html ，但这只是系统的默认配置，可以通过修改类的 layout 属性来改变布局文件的名称及位置

module.exports = class IndexController extends Controller {
    run(req, res) {
        this.getView().title = 'layout demo';
        this.getView().enableLayout = true;

        // 这里的 'app' 是一个系统别名
        // 表示将默认布局文件修改为 app/layout/default.html
        this.getView().layout = 'app/layout/default';

        this.render('index', {
            age: 20
        })
    }
}

向 head 部分添加资源

有时候项目需要引入一个外部 javascript 文件，并且这个 javascript 文件需要在页面加载时先运行，模板引擎针对这种情况提供了向 html 的 head 部分追加内容的功能

下面在模板文件中调用 addHeadAsset() 函数，实现添加头部资源。布局文件中调用 getHeadAssets() 实现了输出资源到页面

// 模板片段文件注册了一个样式文件
{{ $this.addHeadAsset '<link href="outer.css">' }}

<div>other html content</div>

// 布局文件使用 getHeadAssets() 输出了所有注册的资源
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    {{{ $this.getHeadAssets }}}
</head>
<body>
    content
</body>
</html>

处理输出

从 candyjs 4.5.4, @candyjs/template-hbs 0.1.4 开始支持返回模板处理结果，使用 output 参数控制是否直接输出或者返回模板渲染结果

module.exports = class IndexController extends Controller {
    run(req, res) {
        this.getView().title = 'layout demo';
        this.getView().enableLayout = true;

        // set output parameter
        this.getView().output = false;

        this.render('index', {
            age: 20
        }).then((data) => {
            // todo
            res.end(data);
        });
    }
}

CHANGELOG

2021-10-13
- 1.0.0 此版本依赖 candyjs >= 4.9.3
2020-11-12
- 0.1.7 布局文件路径去除 @ 符号，由 '@app/views/layout' 修改为 'app/views/layout'
2020-09-15
- 0.1.5 优化布局文件参数去除 title 和 description
2020-09-15
- 0.1.3 增加引入资源功能
2020-08-10
- 0.1.1 渲染模板添加 $parameters 参数

Keywords

FAQs

What is @candyjs/template-hbs?

Is @candyjs/template-hbs well maintained?

Package last updated on 22 Jan 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install