nodejs / express / oboe.js & pug:获取 node() 事件以更新 dom
nodejs / express / oboe.js & pug: Get node() events to update the dom
第一次使用节点和模板引擎(是的,我知道,"start" 但无论如何)。我正在从 json 流构建一些内容,最后我想将此内容吐出到我的 html 页面中的 div,如下所示(已更新) 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
我收到错误“错误:发送后无法设置 headers”。所以我认为问题是 oboe.node() 随时都在触发,而我没有在正确的时间发送响应内容?连接 oboe.node() 事件所需的 code/framework 是什么,以便它们可以在我的哈巴狗模板中定位或创建 dom 元素并正确发送响应?谢谢
好的,我试试
如果您想要呈现带有一些计算内容的页面,那么
// 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
and include
jade 关键字。还是这招(不推荐)
// 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}
您需要执行以下操作:
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});
});
});
第一次使用节点和模板引擎(是的,我知道,"start" 但无论如何)。我正在从 json 流构建一些内容,最后我想将此内容吐出到我的 html 页面中的 div,如下所示(已更新) 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
我收到错误“错误:发送后无法设置 headers”。所以我认为问题是 oboe.node() 随时都在触发,而我没有在正确的时间发送响应内容?连接 oboe.node() 事件所需的 code/framework 是什么,以便它们可以在我的哈巴狗模板中定位或创建 dom 元素并正确发送响应?谢谢
好的,我试试
如果您想要呈现带有一些计算内容的页面,那么
// 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
and include
jade 关键字。还是这招(不推荐)
// 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}
您需要执行以下操作:
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});
});
});