nodejs / express / oboe.js & pug: получить события node() для обновления домена

Question

Впервые работаю с движками узлов и шаблонов (да, я знаю, ужасное место, чтобы "начать", но неважно) Я собираю некоторый контент из потока json, и в конце я хотел бы выложить это содержимое в div на моей html-странице, как показано в этом (обновленном) фрагменте expressjs:

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(), чтобы они могли нацеливаться или создавать элементы dom в моем шаблоне pug и правильно отправлять ответ? Благодарю.

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

Хорошо, я попытаюсь.

Если вы хотите визуализировать страницу с некоторым рассчитанным содержанием, то

// 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}

Для смешивания кода шаблона вы можете использовать extends а также include нефритовые ключевые слова. Или этот трюк (не рекомендуется)

// 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}