What is the rendered HTML output when a GET request is made to `http://localhost:3000/profile` in the following Express application?
const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
app.engine('handlebars', exphbs({ defaultLayout: false }));
app.set('view engine', 'handlebars');
app.get('/profile', (req, res) => {
res.render('profile', { name: 'Charlie', hobbies: ['reading', 'gaming'] });
});
app.listen(3000);
// views/profile.handlebars
<div>
<h1>{{name}}</h1>
<ul>
{{#each hobbies}}
<li>{{this}}</li>{{/each}} </ul> </div>
Các phương án trả lời
Chọn một phương ánLời giảiChọn phương án để mở
Đáp án đúng: "
<div>
<h1>Charlie</h1>
<ul>
<li>reading</li>
<li>gaming</li>
</ul>
</div>". Lần theo mã: app.engine đăng ký express-handlebars cho đuôi handlebars với defaultLayout false, nghĩa là không bọc layout ngoài, và app.set chọn nó làm view engine. Khi GET tới /profile, res.render tìm tệp views/profile.handlebars và truyền dữ liệu gồm name là Charlie, hobbies là mảng reading, gaming. Trong template, {{name}} được thay bằng Charlie; khối each lặp qua mảng hobbies, và trong mỗi lượt {{this}} là phần tử hiện tại, nên sinh ra hai thẻ li là reading và gaming. Cách gọi exphbs() trực tiếp như hàm là kiểu của các bản express-handlebars cũ (bản mới dùng exphbs.engine()), câu hỏi xét kết quả render với cấu hình chạy được này. "<div> <h1>Charlie</h1> <ul></ul> </div> " chỉ xảy ra khi hobbies rỗng hoặc không được truyền, trong khi dữ liệu có hai phần tử. Kết quả có <h1>undefined</h1> sai vì name đã được truyền, và kể cả khi thiếu, Handlebars in chuỗi rỗng chứ không in chữ undefined. "Throws an error due to invalid Handlebars syntax" sai vì mọi thẻ đều đúng cú pháp và khối each được đóng đầy đủ.