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 不完全兼容吗？有没有更好的方法来设置它正常工作？

4

1 回答 1

0

这是我解决问题的方法

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

文件

应用程序.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 的工作，我决定继续使用玉。我喜欢 bliss 的语法，但除了花费太多时间让 bliss 工作之外，我还决定我还没有准备好完全投入其中:)

于 2013-09-27T00:11:22.973 回答