Tag: 帕格

Ajax结果更改Jade赋值variables

试图用ajax post的结果来改变一个Jade分配的variables,以便页面的Jade循环利用新的数据(只更新与循环相关的dom部分而不是渲染页面)。 route.js router.post('/initial', function(req, res) { res.render('/page', {data: data}) }) router.post('/refresh', function(req, res) { res.send(newdata) }) index.jade block content – var fluxdata = data each item in fluxdata span= item div#button client.js $(document).on('click', '#button', function() { $.post('/refresh', function(newdata) { var fluxdata = newdata }) } 我尝试了部分,但不知道我是在正确的轨道上。 看了一下周围的互联网和stackoverflow一段时间,无法find一个类似的问题,关于玉的任务。

使用翡翠function与吞噬改变?

当我对.jade文件进行更改时,我希望Gulp任务只为该文件运行,而不是为所有文件运行。 为此,我正在使用gulp-changed 。 它工作正常,直到我更改影响全局布局的文件,例如_header.jade , _layout.jade 。 当我对该文件进行更改时,什么都不会发生。 所有我的布局文件在标题之前都有_ 。 我该如何解决这个问题? 这是我的gulp文件的一些行 gulp.task('jade', function() { return gulp.src('dev/templates/**/!(_)*.jade') .pipe(plumber({ errorHandler: onError })) .pipe(changed('public', {extension: '.html'})) .pipe(jade({ pretty: true, })) .pipe(gulp.dest('public')) .pipe(browserSync.reload({ stream: true })); }); gulp.task('watch', function() { gulp.watch('dev/templates/**/*.jade', gulp.series('jade')); });

button单击Jade没有脚本标记

我看到这个代码button点击翡翠 button(onclick=foo) script(foo(){alert('foo');}) 我不想要任何脚本标记或任何JavaScript代码在我的呈现页面。如何可以如何使任何button点击翡翠从express或node.js文件?

在快递中禁用视图caching中的帕格(翡翠)模板

我用"express": "^4.14.0", "pug": "^2.0.0-beta6" app.set('view engine', 'jade'); … app.get('/', function (req, res) { res.render('index.pug', {…}); } 当我使用Express renderfunction时,它只渲染模板。 如果我改变帕格模板,我会根据已经编译好的模板得到旧的页面版本。 对于开发的目的,我需要expression为每个render调用重新编译.pug模板。 我怎样才能做到这一点? 我尝试了这样的: app.disable('view cache'); OR app.set('view cache', false); OR app.set('view cache', 'disabled'); 但是这些都没有帮助。

如何执行express来将string解释为HTML代码?

我开始使用node.js,特别是express.js。 鉴于我喜欢尽可能干 ,我已经决定只有一个index.pug模板,其中有一个单一的HTML元素main.content身体。 实际内容由pug.renderFile()根据摘录创build,存储在<name>.pug文件中。 整个画面是这样的: SERVER.JS response.render("index", { content: pug.renderFile(excerpt("aboutus"), { title: "About Us", subtitle: "Some subtitle here", article: "Some text here" }) }); ABOUTUS.PUG h1= title h3= subtitle article= article INDEX.PUG //- html-head-body routine main.content= content 问题是, pug.renderFile()以string的forms返回HTML代码,而不是获取main.content元素内的main.content元素,我得到这个确切的string作为该元素的.innerHTML 。 那么,我的错误是什么?

帕格 – 编译后错误的嵌套 – 包括vs扩展

编辑:根据正确的答案修改标题,以帮助谷歌search 在下面的代码中,在我的header.pug包含在404.pug页面之后,我的404.pug标签在404.pug页面中不断变成h1标签的孩子。 这是我正在使用的代码: Header.pug doctype html head meta(charset='utf-8') title Express Guestbook link(href="to/bootstrap.min.css", rel="stylesheet") body.container h1 Express Guestbook a.btn.btn-primary.pull-right(href="/new-entry") Write in Guestbook //- putting this div here so that whatever code 'include'-s this //- header, will be a child of this div div 404.pug include header.pug //- This part becomes child of <a> tag, instead of […]

如何持续访问用户是否在视图中进行身份validation

我试图限制用户使用passport.js作为身份validation中间件来访问快速应用程序中的内容。 我想这样做的方式是通过使用pug.js模板inheritance将所有受限视图加载到基本模板中的块: // All views extend this base template doctype html html head body h1 This is my base template if(authenticated) // Child templates overwrite this block with their content block content else // Otherwise, prompt user to log in a(href='/login') login 我读过,我可以访问res.locals保存在视图中的值,但这样的值是作用于该响应,我将不得不传递一个值,如“authenticated:true”到每个模板,我最终使用以上的方法。 有没有更好的方法来在所有视图中始终如一地访问会话数据而无需重复代码,或者更好的方法来限制快速应用程序中的用户访问? 感谢您的input。

如何在nodejs中使用pug-bootstrap模块?

我在一个nodejs项目中安装了pug -bootstrap模块。 我正在尝试从导航栏创build一个菜单。 我做了这些文件: layout.pug: include /node_modules/pug-bootstrap/_bootstrap.pug index.pug: extends layout block head +navbar("menu") +nav_item("#", undefined, true) string test block body h1= title p Welcome to #{title} _bootstrap.pug包含bootstrap css文件: https ://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css。 但是它没有加载到网页上。 有人知道为什么? 以及如何解决这个问题? 任何帮助将不胜感激。

如何获得节点js中dynamic创build的button的button动作?

我是expressionjs(和节点js)的新手。 我正试图实现一个onclick监听器dynamic创build的button。 这是我的代码 Native.pug doctype html html head title="div dude" body div.main#main(style="height:300px;width:800px;border-style: solid;border-color: #ff0000 #0000ff;padding:10px") each prod in product_name // Created by krishna on 19/5/17. div.child1#child1(style="float:left;height:280px;width:30%;border-style: solid;border-color: #ff0000 #0000ff;margin:10px") p.greetings#people1 Hello World! p.id#id #{prod.id} p.name#name #{prod.name} p.price#price #{prod.price} button.send#send(onclick='senddata()') Add to Cart script(src='/javascripts/try.js') try.js function senddata() { document.getElementById("send").innerHTML = "YOU CLICKED ME!"; } index.js var […]

在Pug中迭代多个数组

我正在用Node和Express制作一个图片库应用程序。 我使用帕格作为我的模板引擎。 我有单独的文件夹的全尺寸,图像以及缩略图。 基本上我想要的只是渲染缩略图,并使该缩略图链接到该图像。 我传递一个对象与两个数组从路由,它输出到控制台: { link: [ '/images/20170902_164510.jpg', '/images/IMG-20170903-WA0002.jpg', '/images/IMG-20170903-WA0003.jpg', '/images/IMG-20170903-WA0004.jpg' ], thumb: [ '/thumbnails/20170902_164510.jpg', '/thumbnails/IMG-20170903-WA0002.jpg', '/thumbnails/IMG-20170903-WA0003.jpg', '/thumbnails/IMG-20170903-WA0004.jpg' ] } 我有我的帕格模板如下 each image in images a(href=image.link, data-toggle='lightbox') img(src=image.thumb) 这不会输出任何内容到页面中。 如果我这样做,它的工作 each image in images.thumb a(href=image, data-toggle='lightbox') img(src=image) 但只适用于缩略图的数组。 那么我怎样才能访问这两个数组的适当的方式,我可以分开链接和缩略图? 先谢谢你!