nodejs/express/oboe.js & pug: Erhalte node() -Ereignisse, um das dom zu aktualisieren

Question

Das erste Mal arbeite ich mit Knoten- und Template-Engines (ja, ich weiß, schrecklicher Ort zum "Start", aber was auch immer). Ich baue einige Inhalte aus einem json Strom, und am Ende würde Ich mag diesen Inhalt spucken in meinem HTML-Seite auf ein div aus, wie in diesem folgt (aktualisiert) Express.js Snippet:

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 

ich erhalte die Fehlermeldung ‚Fehler: nicht Header gesetzt, nachdem sie gesendet werden‘. Ich glaube also, das Problem ist, dass die oboe.node() zu jeder Zeit feuert und ich den Antwort-Inhalt nicht zur richtigen Zeit sende? Was ist der Code/das Framework, der benötigt wird, um die oboe.node() - Ereignisse zu verkabeln, so dass sie dom-Elemente in meiner Mug-Vorlage anvisieren oder erstellen können und die Antwort korrekt senden? Vielen Dank.

Answer 1

Sie müssen so etwas wie dies tun:

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

Ok, ich werde es versuchen.

Wenn Sie Seite mit einigen berechneten Inhalt machen wollen, dann

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

Template-Code mischen Sie extends und include Jade Schlüsselwörter verwenden können. Oder dieser Trick (nicht empfohlen)

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