{{#each}}句柄块未被访问



我在车把文件中遇到了一个#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;

}

网页图片没有显示"选择宠物"选项

相关内容

  • 没有找到相关文章

最新更新