我在车把文件中遇到了一个#each循环的问题。我不确定句柄文件或JSON对象中的语法是否有问题。我在网上搜索过,但找不到解决办法。任何帮助,感谢!
main.handlebars
{{#with content}}
{{!-- questions --}}
<form action='/result' method="get">
{{#each questions}}
<p>{{q}}</p><br>
*... irrelevant code ...*
{{/each}}
<input type="submit" value="Get Result">
</form>
{{/with}}
interface.js
/*
SETUP
*/
// Express
var express = require('express'); // We are using the express library for the web server
const { engine } = require(
'express-handlebars'); // Loads handlebars module
var app = express(); // We need to instantiate an express object to interact with the server in our code
PORT = 8315; // Set a port number at the top so it's easy to change in the future
app.engine('handlebars', engine()); // Sets handlebars configurations
app.set('view engine', 'handlebars'); // Sets to use handlebars engine
app.set("views", "./views");
app.use(express.static('public')); // Needed to import a css file
/*
QUIZ CONTENT
*/
quizContent = () => {
return {
title: "What Type of Cookie Are You?",
description: "Take this fun and easy quiz to find out what kind of cookie you are! Just answer each question, then select Get Result at the bottom of the page",
questions: [
{
q: "Pick a color",
a1: "Blue",
a2: "Red",
a3: "Green",
a4: "Purple"
},
*... irrelevant content ...*
}
}
/*
MAIN PAGE
*/
app.get('/', function(req, res)
{
res.render('main', {layout: 'index', content: quizContent()});
});
web页面
输入图片描述
问题基本解决。
我最后定义了一个变量来包含测验内容,然后在quizContent()中返回该变量,而不是直接返回内容。现在,除了最后一题(挑选一只宠物)的a1到a4之外的所有内容都显示出来了。
/*
QUIZ CONTENT
*/
quizContent = () => {
var jsonQuiz = {
title: "What Type of Cookie Are You?",
description: "Take this fun and easy quiz to find out what kind of cookie you are! Just answer each question, then select Get Result at the bottom of the page",
questions: [
{
q: "Pick a color",
a1: "Blue",
a2: "Red",
a3: "Green",
a4: "Purple"
},
{
q: "Pick a place to vacation",
a1: "Mountains",
a2: "Ocean",
a3: "City",
a4: "Forest"
},
{
q: "Pick an occupation",
a1: "Doctor",
a2: "Accountant",
a3: "Veterinarian",
a4: "Firefighter"
},
{
q: "Pick a late night snack",
a1: "Popcorn",
a2: "Chips",
a3: "Pizza",
a4: "Ice Cream"
},
{
q: "Pick a pet",
a1: "Dog",
a2: "Cat",
a3: "Hampster",
a4: "Lizzard"
}
],
Results: {
r1: "Chocolate Chip",
r2: "Oatmeal Rasin",
r3: "Peanut Butter",
r4: "Snickerdoodle"
}
};
return jsonQuiz;
}
网页图片没有显示"选择宠物"选项