如何让 {{>partials} 与 Consolidate.js 和 Mustache 一起工作？答案

【问题标题】：How to get {{>partials} working with Consolidate.js & Mustache?如何让 {{>partials} 与 Consolidate.js 和 Mustache 一起工作？
【发布时间】：2012-12-09 22:00:48
【问题描述】：

当与 consolidate.js 一起使用时，我无法像 {{>my_partial}} 那样添加小胡子阅读部分。我开始我的快速应用程序是这样的：

文件 index.js：

var express = require('express'),
    cons    = require('consolidate'); 

app.configure(function(){

  app.set( 'models',       BACKEND + '/models' );       // Set the models directory
  app.set( 'views',        BACKEND + '/views' );        // Set the views directory
  app.set( 'controllers',  BACKEND + '/controllers' );  // Set the controllers dir


  app.set( 'view engine',  'html' );                // Set Mustache as the templating engine
  app.engine( 'html', cons.mustache );
  app.engine( 'mustache', cons.mustache );

  app.use( app.router );  // Set the router
  app.use( '/public', express.static( BASEPATH + '/frontend/public' ) );  // set frontend/public to /public for users
  app.use( '/js', express.static( BASEPATH + '/frontend/js' ) );
  app.use( '/out', express.static( BASEPATH + '/out' ) ); // documentation path

  // Set client side libraries here (Make them available to the public based on settings.json)
  for(setting in SETTINGS.public) {
    app.use( SETTINGS.public[setting],  express.static(BASEPATH + SETTINGS.public[setting]) );
  }

});

然后，在控制器的某个地方，我像这样使用渲染：

function Blog(app, request, response){

  var fs      =  require('fs'), 
      Blog    =  require( app.get('models') + '/blog' ),
      model   =  new Blog(),
      scripts =  fs.readFileSync( VIEWS + '/m_scripts.mustache').toString()     ;

  model.List(function(data){

    response.render('layout', 
      {
        title     :  'My Blog',
        body      :  'Hello Mustache World',
        list      :  data.rows,
        cache     :  false,
        partials  : {
          m_scripts : partialStr
        }
      }
    );

  });

};


exports.list = Blog;

m_scripts.mustache 有：

<script data-src="ergierjgoejoij"></script>

布局模板渲染得很好，参数通过也很好，部分 m_scripts 与 readFileSync().toString() 传递的文本一起传递很好，但 HTML 内容被编码并呈现无用。

我的问题是，有没有一种方法可以直接放入 layout.mustache {{>m_scripts}} 并且 mustache 可以自动加载 m_scripts.mustache，而无需将其传递给 render()。如果没有，我错过了什么？

【问题讨论】：

标签： node.js express templating mustache

【解决方案1】：

事实证明，此时 consolidate.js 不支持 partials。有一个拉取请求来解决此问题，但尚未合并：https://github.com/simov/consolidate.js

我最终改用了那个叉子：

1) npm 卸载合并

2) npm install simov/consolidate.js

npm install simov/consolidate.js 将安装该分叉版本。然后我可以执行以下操作：

/**
 * @module Blog Controller
 */ 
function Blog(app, request, response){

  var Blog    =  require( app.get('models') + '/blog' ),
      model   =  new Blog();

  model.List(function(data){

    response.render('layout', 
      {
        title     :  'My Blog',
        body      :  'Hello Mustache World',
        list      :  data.rows,
        cache     :  false
        ,partials  : {
          m_scripts : './backend/views/m_scripts.html'
        }
      }
    );

  });

};


exports.list = Blog;

这比我想象的要简单得多。您将路径传递给您的部分，然后您可以在 layout.html 上使用 {{>m_scripts}}

仍然不确定是否有办法做到这一点，默认情况下，在视图文件夹或其他东西上查找 {{>m_scripts}}。那会很整洁。

【讨论】：

如何在部分文件中传递动态数据？

【解决方案2】：

您可以使用 Hogan 代替 Mustache。 Hogan 将使用您在 app.set('partials', partialsPathMap) 中设置的部分渲染模板作为路径图。

您可以在您的项目中使用此gist:5149597 中的代码。那么渲染模板时就不需要再配置partials了。

2014 年 6 月 23 日编辑：

为了简单起见，我写了一个 npm 来处理这个问题。就npm install mustlayout，仓库和文档在这里：https://github.com/mytharcher/mustlayout

【讨论】：

谢谢，给霍根一个机会。

【解决方案3】：

我偶然发现了这个主题，因为我想知道 Consolidate 如何使用 partials，并发现 Consolidate 现在可以很好地使用 partials。

创建一个views文件夹并创建一个名为index.hbs的文件
在 HTML 中的某处添加行 {{>menuPartial}}
创建一个名为 partials 的视图子文件夹
创建一个名为 menu.hbs 的文件

然后你可以使用这个 Node 脚本来使部分工作：

const express = require('express');
const engines = require('consolidate');


const app = express();
app.engine('hbs', engines.handlebars);
app.set('views', './views');
app.set('view engine', 'hbs');

app.get('/', (request, response) => {
    response.render('index', { partials : { menuPartial : './partials/menu'} });
});

exports.app = functions.https.onRequest(app);

【讨论】：