Javascript 一旦我将数组作为对象传递给Node.js,我如何控制ejs文件中的数据
我正在使用Node.js和ejs创建一个基本的日历应用程序。我正在尝试通过express将一个月数组传递给我的ejs,我希望在按下“下一步”按钮时每个月都能完成。如何添加该功能 下面是Node.js中的代码Javascript 一旦我将数组作为对象传递给Node.js,我如何控制ejs文件中的数据,javascript,node.js,express,ejs,Javascript,Node.js,Express,Ejs,我正在使用Node.js和ejs创建一个基本的日历应用程序。我正在尝试通过express将一个月数组传递给我的ejs,我希望在按下“下一步”按钮时每个月都能完成。如何添加该功能 下面是Node.js中的代码 const Months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 正如你所
const Months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
正如你所看到的,我作为一个物体在我的主要路线上度过了几个月
// main route
app.get("/", function(req, res){
res.render("main", {Months: Months});
});
这是我的ejs文件的一部分
<div class="container">
<ul style="margin: 0; padding: 0; list-style-type: none">
<li class="prev" style="float: left; padding-top: 10px; color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 3px;">
<!-- this is the previous button, when pressed should go back one month -->
<button class="btn btn-default" type="submit">Previous</button></li>
<li class="next" style="text-align: right; padding-top: 10px; color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 3px;">
<!-- This is the next button, when pressed should go on the next month -->
<button class="btn btn-default" type="submit">Next</button></li>
<li style="color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 3px; text-align: center;">
-
先前的
-
下一个
-
这就是我传递月份对象的地方。我如何控制这里的数据,这样当我按下下一个或上一个按钮时,我可以循环浏览数据
<%= Months[0] %><br>
<span style="font-size:18px">2016</span>
</li>
</ul>
2016
该值仅在服务器端可用。如果你解码了这个值,你可以在客户端使用它
下面是一个简单的例子
<p id="month"></p>
<p>
<button id="prev">prev</button>
<button id="next">next</button>
</p>
<script>
let months = <%- JSON.stringify(Months) %>;
let index = 0;
let el = document.getElementById('month');
document.getElementById('prev').addEventListener('click', e => {
index--;
index = index < 0 ? 0 : index;
el.innerHTML = months[index];
});
document.getElementById('next').addEventListener('click', e => {
index++;
index = index >= months.length ? months.length - 1 : index;
el.innerHTML = months[index];
});
</script>
上
下一个
让月份=;
设指数=0;
设el=document.getElementById('month');
document.getElementById('prev')。addEventListener('click',e=>{
索引--;
指数=指数<0?0:指数;
el.innerHTML=月份[索引];
});
document.getElementById('next')。addEventListener('click',e=>{
索引++;
指数=指数>=months.length?months.length-1:指数;
el.innerHTML=月份[索引];
});
您是否试图在客户端Javascript中使用months
数组?如果是这样,您需要在路径中的
标记中实际将该数组呈现为Javascript。不过,由于数组不是动态的,您可以直接将其写入页面中的脚本标记中。你不需要将永远不会改变的东西传递到渲染器中。好的,我会尝试这样做,谢谢@好的,我不知道我可以在ejs中使用jquery操作数据。非常感谢你。顺便说一下,如果我想让jquery成为一个外部文件,我必须把它放在公共文件夹中,或者放在什么地方,这样我的代码才是干净的。这与jquery无关。像这样小的东西可能会进入您的视图文件。您不应该为视图特定的代码段创建新文件。NodeJS是服务器端的,因此变量只在客户端呈现时出现,此后,如果不在客户端使用http请求,就无法访问任何服务器端变量。