NodeJS/Express: 使用Bliss作为模板引擎时出错

Question

NodeJS/Express: 使用Bliss作为模板引擎时出错

3

我正在尝试将Jade替换为Bliss作为NodeJS上示例Express网站的模板引擎。以下是app.js的内容：

var express = require('express'),
    routes = require('./routes'),
    http = require('http'),
    path = require('path'),
    Bliss = new require('bliss'),
    bliss = new Bliss({ext: '.jhtml'}),
    app = express();

app.configure(function(){
    app.set('port', process.env.PORT || 3000);
    app.set('views', __dirname + '/views');
    // app.set('view engine', 'bliss'); /* replaced with app.engine() call below */
    app.use(express.favicon(__dirname + '/public/img/favicon.ico'));
    app.use(express.logger('dev'));
    app.use(express.bodyParser());
    app.use(express.methodOverride());
    app.use(app.router);
    app.use(require('stylus').middleware(__dirname + '/public'));
    app.use(express.static(path.join(__dirname, 'public'))); });

app.configure('development', function(){
    app.use(express.errorHandler());
    app.locals.pretty = true; });

app.get('/', /* routes.index */ function(req, res){
    var index = bliss.compile('index');
    bliss.render(index); });

http.createServer(app).listen(app.get('port'), function(){
    console.log("Express server listening on port " + app.get('port')); });

我尝试了其他一些SO问题中的方法，但是由于不熟悉Node、Express或Bliss，无法调试为什么会返回以下500错误：

500 TypeError: Object function anonymous() { var __out=[],write=__out.push.bind(__out),__tmp=0,render=this.render;write("index"); return __out.join(''); } has no method 'indexOf'

我相信模板和视图已经正确设置，因为它们非常简单并且紧密遵循 Bliss wiki 的指导。

这是否是因为 Bliss 与 Express 不完全兼容？有没有更好的方法来正确设置它？

- Silkster

是的，我当然看到了。它在我使用的应用程序示例中无法正常工作，这也是我首先提出问题的原因。 - Silkster

我希望有人熟悉在Express中使用Bliss的问题能看到这个问题。 - Silkster

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- meh · Answer 1

这是我解决问题的方法

假设我的所有幸福文件都有 .js.html 扩展名

文件

app.js

var Bliss = require('bliss');
var bliss = new Bliss();
app.set('views', __dirname + '/views/bliss');
app.set('view engine', 'js.html');
app.engine('js.html', function(path, options, fn){

   // res.render is calling this
   // update context here (available to all templates)
   var ctx = options.context;
   console.log("context", ctx);
   if (typeof ctx === 'undefined') {
      ctx = {};
   }

   // these will write over what's already in the context
   ctx.name2   = 'MEH2';
   //ctx.name1   = 'MEH1';
   //ctx.layout  = 'layout2';

   var output = bliss.render(path, ctx); 
   fn(null, output); // fn ==> function(error, str) 
});

路由文件 index.js

exports.index = function(req, res){

  console.log("ready to render index1.js.html");

  var ctx = {context : {name1 : 'mike1'}};
  ctx.context.layout = 'layout1';

  res.render('index1', ctx);
};

index1.js.html 文件

@!(ctx)

@function title() {
   WOW @ctx.name1, @ctx.name2
}

@function body() {
<div>
   <h2> Hello @ctx.name1</h2>
</div>
}

@*choose the layout based on the context*@
@render(ctx.layout, body, title, ctx)

layout1.js.html

@!(body, title, ctx)

<!DOCTYPE html>
<html>
<head>
<title> @title() </title>
</head>
  <body>
  <h1> REALLY @ctx.title </h1>
  LAYOUT 1
  @body()
  </body>
</html>

layout2.js.html是相同的，只是其文本为LAYOUT 2

现在尝试使用app.js/app.engine函数，观察您如何在不同阶段影响上下文

评论：现在我已经让express.js和bliss工作了，我决定继续使用jade。我喜欢bliss的语法，但除了花费太多时间让bliss工作之外，我决定我还没有准备好完全投入它 :)