express和jade:循环并创建动态id

时间:2013-09-26 01:28:39

标签: javascript jquery node.js express pug

好的,这应该是节点上的一个简单问题。

使用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;

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

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:4)

我建议您不要使用内联函数,我会在客户端附加click事件,但您可以像使用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 });
});