node.js - 如何使用jquery或angularjs在jade模板中创建弹出窗口

Question

我正在使用带有 Jade 模板的 Express 框架。我的问题是我想添加一个弹出窗口。我有 jQuery 和 Angular。我尝试过nodejs的npm弹出窗口，但它不符合我的要求。我想在单击按钮时显示弹出窗口。

Answer 1

在我最近正在进行的一个项目中，需要一个确认弹出窗口来确认用户是否想要删除某些内容。由于这是唯一的客户端 UI 交互，因此迁移到 browserify 和 watchify 的开销远远大于所需的任务。 所以这不是使用 Angular 或 jquery，而是使用基于 NPM 的插件。

然而，它实现了使用 Node Express 和 Jade 创建服务器端 poups 的任务。

首先，在 npm 存储库中选择了一个弹出窗口插件。选择的是popupS，一个基于NPM的插件，它使用browserify来编译和使用。

该插件可以从以下位置获取: 对于 Node.js + Browserify 安装:

npm install popupS --save

但是目前使用 browserify 超出了范围，因此该插件是从 gitHub 存储库获取的。以下步骤说明如何使用 Jade、Express 和 Node 在服务器端代码中包含弹出窗口:

在 Node 应用程序根文件夹中找到 app.js 文件并确保存在如下代码片段:

var express = require('express');
var path = require('path');
var app = express();
app.use(express.static(path.join(__dirname, 'public')));

该行代码使用express.static 设置静态文件的文件夹。然后在Node应用程序根文件夹的public目录中，创建一个js文件夹。

然后:

cd /public/js
wget https://raw.githubusercontent.com/ChiefORZ/popupS/master/dist/popupS.min.js
cd ../css
wget https://raw.githubusercontent.com/ChiefORZ/popupS/master/css/popupS.min.css

然后在包含 Jade 文件的应用程序 View 中，找到应用程序的 index.jade 或 layout.jade 文件，即 body 和 head 标记所在的位置。 假设头部位于 layout.jade 中，在其中添加以下行:

link(rel='stylesheet', href='/stylesheets/popupS.min.css')
script(src="/js/popupS.min.js")

然后在需要出现弹出窗口的 Jade 文件中添加一个按钮，其中的 onClick 事件调用 js 函数，该函数又创建弹出窗口。以下代码显示了这一点:

script.
     function popup() {
         popupS.confirm({
             content: 'Do you want to delete #{user.userName}?',
             labelOk: 'Yes',
             labelCancel: 'No',
             onSubmit: function() {
                 window.location.href = "/users/removeUser/#{user._id}"
             },
             onClose: function() {
                 console.log(':(');
             }
        });
     }
td
button(onclick="popup()") Delete with conf

当用户单击“Delete with conf”按钮时调用该函数，然后显示一个弹出窗口，要求用户确认。如果用户确认浏览器被重定向到删除用户对象的路由，否则什么也不会发生。 弹出窗口如下所示:

尽管 UI 逻辑不应该在 Jade 中，但现在只需要 20 行代码，应用程序中就可以弹出窗口，而无需使用 browserify 的开销!

我创建的原始博文在这里:Node Express Jade popups