javascript - express 和 Jade : loop and create dynamic ids

Question

好吧，这应该是一个关于 Node 的简单问题。

使用express，一个文件有一个名为app.js的文档，另一个是index.jade，还有一个index.js，通常还有另一个javascript，比如server.js，服务器的大部分工作都在其中完成(这里的代码可以在app.js内部，但我们假设它们是不同的文件)。

假设我有两个这样的对象

myIDs   = ['afoo', 'abar'];
myArray = ['foo', 'bar'];

在server.js中，我想迭代它们在jade中的元素，并创建分别具有值foo和bar的按钮，它们的id分别是afoo和abar。我们怎样才能做这样的事情呢？

此外，是否可以实现鼠标点击是否发生在这些按钮之一？我尝试为我使用类似这样动态创建的特定按钮命名

html = "<button id=\"aUniqueID\">Press me!</button>"
document.getElementById('puff').innerHTML = html;

但是，即使它出现在浏览器中，按下按钮时也没有任何反应(我正在向服务器发送消息，服务器应该打印控制台日志)。

如有任何帮助，我们将不胜感激。

Answer 1

我建议您不要使用内联函数，我会在客户端附加点击事件，但您可以像普通的jade一样将其内联添加

这假设每个按钮的值和 id 位于相同的数组位置:

myIDs   = ['afoo', 'abar'];
myArray = ['foo', 'bar'];

each button_id, i in myIDs
    button(id="#{button_id}", onclick="yourFunctionHere();") #{myArray[i]}

更新:

将数组传递到 .jade 页面就像:

app.get('/your-url-path', function(req, res){

    var my_ids_array = ['afoo', 'abar'];
    var my_values_array = ['foo', 'bar'];

    res.render('your-jade-page', { myIDs: my_ids_array, myArray: my_values_array });
});