(NodeJS) Можно ли поддерживать индексную переменную на стороне клиента для итерации по элементу базы данных с использованием E JS? - PullRequest
Новая
       94

(NodeJS) Можно ли поддерживать индексную переменную на стороне клиента для итерации по элементу базы данных с использованием E JS?

1 голос
/ 20 июня 2020

В настоящее время я работаю над приложением-викториной, которое извлекает вопросы и ответы из экземпляра MongoDB. Поле «вопросы» в моей схеме викторины представляет собой массив объектов вопросов (содержит текст вопроса и связанные с ним ответы). Я использую E JS для отображения вопросов на стороне клиента, как показано ниже.

game.e js snippet 

    <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, так что есть ли обходной путь? Я пробовал делать question.inner HTML = <% - mySet.questions [questionNum] .questionText%> в моем клиентском файле javascript, но это не работало должным образом. Я также подумал, что вместо использования E JS, возможно, я мог бы просто перенести весь набор вопросов со стороны сервера на сторону клиента, а затем визуализировать вопросы 1 на 1 с использованием внутреннего HTML. Возможно ли это? Как люди обычно go относятся к отображению данных сервера на стороне клиента без использования механизмов шаблонов? Более подходящий код ниже. Извините, если это глупый вопрос, я новичок. Большое спасибо!

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
}

игра. 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] })
        });
    }
}

установить. js (мон goose модель схемы) 

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);
...