nodejs/express/oboe.js＆pug：domを更新するnode（）イベントを取得

Question

初めてノードとテンプレートエンジンで作業しています（私は知っています。私は、JSONストリームからいくつかのコンテンツを構築していますが、この中で次のように最後に私は（更新）expressjsはスニペット、私のhtmlページにdiv要素にこのコンテンツを吐き出すしたいと思います：

app.get('/foo', function (req, res) { 

    //... get my stream called 'mystream' 

    //... get ready to append content for items found in json stream 
    var htmlbuf = ""; 

    //now process the json stream: 
    oboe(mystream) 
    .node('{bar}', function(aBar){ 
    //eventually, I'd like to actually append individual new DOM elements, 
    //but for now I'll settle for just spitting out raw html: 
    var buffer = '<p>Found a bar with name'+ aBar.name + '</p>'; 
    res.render('index', {itemsfound: htmlbuf}); 
    }); 
}); 

index.pug：

doctype html 
html 
    head 
     link(type='text/css', rel='stylesheet', href='./css/main.css') 
     title Hello 
    body 
     h1 Hello world! 
     div#results.listing 
      items= itemsfound 

私はエラー「エラー：彼らは送られた後、ヘッダーを設定することはできません」を取得。 oboe.node（）はいつでも起動しており、応答コンテンツを適切なタイミングで送信していないという問題があると思います。 oboe.node（）イベントを配線するために必要なコード/フレームワークとは何ですか？pugテンプレートのdom要素をターゲットにしたり作成したりして、レスポンスを正しく送信できますか？ありがとう。

Answer 1

あなたはこのような何かする必要があります

app.get('/foo', function (req, res, next) { 

    //... get my stream called 'mystream' 

    //... get ready to append content for items found in json stream 
    var htmlbuf = ""; 

    //now process the json stream: 
    oboe(mystream) 
    .node('{bar}', function(aBar){ 
    //eventually, I'd like to actually append individual new DOM elements, 
    //but for now I'll settle for just spitting out raw html: 
    htmlbuf += '<p>Found a bar with name' + aBar.name + '</p>'; 
    }) 
    .on('fail', function (err) { 
    res.statusCode = err.statusCode 
    next(err.thrown) 
    }) 
    .on('done', function() { 
    res.render('index', {itemsfound: htmlbuf}); 
    }); 
}); 

Answer 2

よろしくお願いします。

あなたがextendsとincludeヒスイのキーワードを使用することができますテンプレートコードを混合するために

// js 
app.get('/foo', function (req, res) { 
    res.locals.var1 = 'Res.locals.var1'; // you can define vars here too 

    if (!req.xhr) 
     // send as html-page 
     res.render('page.jade', {bar: smth-content, title: 'Hello world'}); // without var1 
    else 
     // send as json on ajax-request 
     res.json({bar: smth-content, title: 'Hello world'}); 
}); 

// .jade 
doctype html 
html 
    head 
    link(type='text/css', rel='stylesheet', href='./css/main.css') 
    |  
    title #{title} 
    body 
    h1 Hello world! 
    | 
    #{bar} #{var1} 

その後、いくつかの計算されたコンテンツを含むページをレンダリングしたい場合。あるいは、このトリックは（推奨されません）

// js 
app.get('/foo', function (req, res) { 
    res.render('row.jade', {myblock: smth-content}, function(err, html) { 
     if (err) 
      return res.send(err.message); 
     res.render('page.jade', {myblock: html}); 
    }); 
}); 

// page.jade 
doctype html 
html 
    head 
    link(type='text/css', rel='stylesheet', href='./css/main.css') 
    body 
    #{myblock} 

// myblock.jade 
p Found a bar with name #{myblock}