0

私はノードを初めて使用し、テンプレートの作成方法に柔軟に対応できる方法で口ひげを統合する方法を見つけようとしています。hogan、mustache-express、および口ひげの他の順列を試した後、次のことが理にかなっていることがわかりました。

これを処理するより効率的な方法があるかどうかはわかりません。基本的に、部分テンプレートを制御して、マスター テンプレートのモジュール位置にロードできるようにしたいと考えています。これが基本的な設定です

3 つの部分テンプレートと 1 つのラッパー/マスター テンプレートがあります。次の値は単なる例です。

./views/wrapper.tpl

<html>
<title>{{ title }}</title>
<body>
    <h1>{{ heading }}</h1>
    <div>{{> position_1 }}</div>
    <div>{{> position_2 }}</div>
    <div>{{> position_3 }}</div>
</body>
</html>

./views/module_1.tpl

<h2>{{module_1.title}}</h2>
<p>{{module_1.body}}</p>

./views/module_2.tpl

<h2>{{module_2.title}}</h2>
<p>{{module_2.body}}</p>

./views/module_3.tpl

<h2>{{module_3.title}}</h2>
<p>{{module_3.body}}</p>

Express を使用していますが、デフォルトの jade レンダリング エンジンを削除しました。デフォルトの高速インストールに追加する必要があるコードのみを含めました。口ひげと fs が必要です

.
.
.
var mustache = require('mustache');
var fs = require('fs');
.
.
.
app.get('/', function(req, res){

    // grab master template
    var wrapper = fs.readFileSync('./views/wrapper.tpl', "utf8");

    // load data that will be used in template & partials
    var data = {
                'title': 'dashboard',
                'heading': 'welcome to your dashboard',
                'module_1':{
                            'title': 'module 1 title', 
                            'body': 'module 1 body'},
                'module_2':{
                            'title': 'module 2 title', 
                            'body': 'module 2 body'},
                'module_3':{
                            'title': 'module 3 title', 
                            'body': 'module 3 body'}};

    // load partial templates
    var partials = {'position_1': fs.readFileSync('./views/module_1.tpl', "utf8"),
                    'position_2': fs.readFileSync('./views/module_2.tpl', "utf8"),
                    'position_3': fs.readFileSync('./views/module_3.tpl', "utf8")}

    // include partials and then replace variables with given data
    var html = mustache.to_html(wrapper, data, partials);

    // send output to browser
    res.send(html);

});
.
.
.
.

これは、私が見た他の例よりもはるかに理にかなっており、口ひげとうまく機能します. モジュールをどこに配置したいかについて、ユーザーにカスタム コントロールを与えることができます。だから私の質問は

これを行うより効率的な方法はありますか？

私がこれについて行っている方法に何か問題がありますか?

Express レンダリング機能をバイパスすると、何が失われますか?

consolidate のようなライブラリを使用し、別のレイヤーを追加して表現する必要があるのはなぜですか?

ありがとう！

4

1 に答える 1