javascript - （NodeJS）可以维护客户端索引变量以使用 EJS 遍历数据库元素吗？

Question

我目前正在开发一个从 MongoDB 实例中提取问题和答案的测验应用程序。我的测验模式中的“问题”字段是一个问题对象数组（包含问题文本和相关答案）。我正在使用 EJS 在客户端显示问题，如下所示。

game.ejs 片段

    <div id="question-box" style="display: none">
        <div id="question-box-inner">
            <%- mySet.questions[0].questionText %>

        </div>
    </div>

    <div id="photo-box" style="display: none;">
    </div>
    
    <div id="start">
        Ready <br> Set <br> Go!
        <div id="liquid"></div>
    </div>

    <div id="answers-box" style="display: none">
        <ul>
            <li>
                <!-- Use a hidden variable to keep track of the index number of the question to go to the next question on buttonclick -->
                <button type="button" id="answer1" class="btn btn-light"> <%- mySet.questions[0].answers[0] %> </button>
            </li>
            <li>
                <button type="button" id="answer2" class="btn btn-light"> <%- mySet.questions[0].answers[1] %> </button>
            </li>
            <br>
            <li>
                <button type="button" id="answer3" class="btn btn-light"> <%- mySet.questions[0].answers[2] %> </button>
            </li>
            <li>
                <button type="button" id="answer4" class="btn btn-light"> <%- mySet.questions[0].answers[3] %> </button>
            </li>
        </ul>
    </div>

这通过访问问题数组的第 0 个索引来显示第一个问题。但是，我想维护一个变量，而不是只输入 0，每当用户单击其中一个答案选项时，该变量都会增加，即 <%- mySet.questions[questionNum].questionText %>。我知道您不能在 HTML 中使用变量，所以有解决方法吗？我尝试在我的客户端 javascript 文件中执行 question.innerHTML = <%- mySet.questions[questionNum].questionText %> 但这没有正常运行。我还想到，也许我可以不使用 EJS，而是将整个问题集从服务器端带到客户端，然后使用 innerHTML 逐一呈现问题。这可行吗？人们通常如何在不使用模板引擎的情况下在客户端显示服务器数据？更多相关代码如下。

gameUX.js（客户端）

var questionNum = 1;

const start = document.getElementById("start");
const questionBox = document.getElementById("question-box");
const photoBox = document.getElementById("photo-box");
const answersBox = document.getElementById("answers-box");
const playersBox = document.getElementById("players-box");

const question = document.getElementById("question-box-inner");
const answer1 = document.getElementById("answer1");
const answer2 = document.getElementById("answer2");
const answer3 = document.getElementById("answer3");
const answer4 = document.getElementById("answer4");

start.addEventListener("click", startQuiz);
answer1.addEventListener("click", nextQuestion);
answer2.addEventListener("click", nextQuestion);
answer3.addEventListener("click", nextQuestion);
answer4.addEventListener("click", nextQuestion);

function startQuiz() {
    start.style.display = "none";
    questionBox.style.display = "block";
    photoBox.style.display = "block";
    answersBox.style.display = "block";
    playersBox.style.display = "block";
}

function nextQuestion() {
    questionNum += 1
    //do something here
}

game.js（服务器端）

module.exports = {
    gameRenderTest: (req, res) => {
        res.render('pages/game.ejs');
    },

    gameRender: (req, res) => {
        var ObjectId = require('mongodb').ObjectId;

        console.log(req.params.tagid);

        var o_id = new ObjectId(req.params.tagid);

        const collection = db.collection('sets');

        collection.find({ _id: o_id }).toArray(function (err, set_list) {
            if (err) throw err;
            console.log(set_list[0].creator);
            res.render('pages/game.ejs', { 'mySet': set_list[0] })
        });
    }
}

set.js（猫鼬模式模型）

const mongoose = require('mongoose');
const SetSchema = mongoose.Schema({
    title: String,
    subtitle: String,
    descriptionTitle: String,
    description: String,
    photoRef: String,
    questions: [{ questionText: String, answers: [String], correct: Number, qTags: [String] }],
    sTags: [String],
    creator: String,
    upvotes: Number,
    curated: Boolean
    // add ___
});

const Set = module.exports = mongoose.model('Set', SetSchema);

标签： javascriptnode.jsmongodbexpressejs