Как отображать элементы массива, переданные в файл Handlebars один за другим при нажатии кнопки? - PullRequest
0 голосов
/ 22 апреля 2020

Предположим, у меня есть следующий массив объектов, успешно отправленных в файл руля с моего express сервера:

[       
    {
        "name": "Jon",
        "isPositive": true 
    }, 
    {
        "name": "Cercei",
        "isPositive": false
    }
]

Каждый раз, когда нажимается моя кнопка, я хочу показать следующий элемент массива на мой вид. Это возможно с рулем? Или мне нужно что-то более сложное, например Vue. js, чтобы решить эту проблему? Вот простой псевдокод, которого я хотел бы достичь:

<head>
    <script> 
        $(document).ready(() => {
            var index = 0; 
            var currentCharacter = getCurrentCharacter(); 
            start();
        });
    </script> 
</head>
<body>
    <h3 id="name"></h3>
    <p id="someInfo"> </p> 

    <button onclick="next()">Next</button>

    <script>        
        function getCurrentCharacter() {
            /// somehow access array of objects sent from server
            var myCharacters = {{characters}}; // {} used because of handlebars 
            var character = myCharacters[index];
            index += 1; 

            return character;
        }

        function start() {
            document.getElementById("name").textContent = currentCharacter.name;

            /// as you see here, I change my UI based on current object fields/attributes
            if (currentCharacter.isPositive) {
                document.getElementById("someInfo").style.display = "block";
                document.getElementById("someInfo").textContent = "Some text here";
            } else {
                document.getElementById("someInfo").style.visibility = "hidden";
            }
        }

        function next() {
            currentCharacter = getCurrentCharacter();
            start();
        }
   </script>
</body>

Возможно ли иметь такую ​​логику c с рулями или другими языками шаблонов? Если они не предназначены для этих целей, пожалуйста, порекомендуйте мне другой способ решения этой проблемы.

...