我无法从 json 获取哈巴狗变量的信息。 handlebars 可以看到信息，pug 看不到。但代码相同

Question

我无法从 json 获取哈巴狗变量的信息。哈巴狗知道 json 中有多少个元素。但看不到标题、价格等。如果我使用 Handlebars，而不是哈巴狗 - 代码有效！！！我不明白为什么 Handlebars 会起作用。哈巴狗不工作。我尝试像这样使用 p #{price} 和像这样 p=price。我不知道是什么问题...

index.js

const express = require('express')
const app = express()
const path = require('path')
const pug = require('pug')

//const homeRoutes = require('./routes/home')
//const addRoutes = require('./routes/add')
const coursesRoutes = require('./routes/courses')


app.set('view engine', 'pug')
app.set('views', './views')

app.use(express.static('public'))
app.use(express.urlencoded({extended: true}))

app.use('/', homeRoutes)
app.use('/add', addRoutes)
app.use('/courses', coursesRoutes)

const PORT = process.env.PORT || 3000

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`)
})

courses.js（路由器）

const {Router} = require('express')
const Course = require('../models/course')
const router = Router()

router.get('/', async (req, res) => {
  const courses = await Course.getAll()
  res.render('courses', {
    title: 'Курсы',
    isCourses: true,
    courses

    
  })
})

module.exports = router

course.js（型号）

const { v4: uuid } = require('uuid');
const fs = require('fs')
const path = require('path')

class Course {
  constructor(title, price, img) {
    this.title = title
    this.price = price
    this.img = img
    this.id = uuid()
  }

  toJSON() {
    return {
      title: this.title,
      price: this.price,
      img: this.img,
      id: this.id
    }
  }

  async save() {
    const courses = await Course.getAll()
    courses.push(this.toJSON())

    
    return new Promise((resolve, reject) => {
      fs.writeFile(
        path.join(__dirname, '..', 'data', 'courses.json'),
        JSON.stringify(courses),
        (err) => {
          if (err) {
            reject(err)
          } else {
            resolve()
          }
        }
      )
    })
    
  }

  static getAll() {
    return new Promise((resolve, reject) => {
      fs.readFile(
        path.join(__dirname, '..', 'data', 'courses.json'),
        'utf-8',
        (err, content) => {
          if (err) {
            reject(err)
          } else {
            resolve(JSON.parse(content))
          }
        }
      )
    })
  }
}

module.exports = Course

courses.js上

[{"title":"Angular 8","price":"12000","img":"https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1200px-Angular_full_color_logo.svg.png","id":"8ae92db5-97f4-494c-ade8-a258d931d61e"},{"title":"Vue JS","price":"20000","img":"https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png","id":"b56de685-9bdf-4c4b-8302-80ad480732ef"},{"title":"erere","price":"1212","img":"232","id":"02787dc5-0ca2-4329-8acf-41b576981e3a"}]

courses.pug

block content
    <h1>courses page</h1>
    
    if courses.length
    each cours in courses
        .row
            .col.s6.offset-s3
                .card
                    .card-image
                        img(src="#{img}")
                    .card-content
                        span.card-title #{title}
                        p.price #{price}
                    .card-action
                        a(href="/courses/#{id}") Open course

    else 
        p there are not courses

但如果我使用 Handlebars。不是哈巴狗——代码有效！！！

{{#if courses.length}}
{{#each courses}}
<div class="row">
  <div class="col s6 offset-s3">
    <div class="card">
      <div class="card-image">
        <img src="{{img}}" alt="{{title}}">
      </div>
      <div class="card-content">
        <span class="card-title">{{title}}</span>
        <p class="price">{{price}}</p>
      </div>
      <div class="card-action">
        <a href="/courses/{{id}}">Open course</a>
      </div>
    </div>
  </div>
</div>
{{/each}}
{{else}}
<p>There are nor courses</p>
{{/if}}

what i see if i use pug

what i see if i use handlebars

Answer 1

迭代内部，可以引用迭代变量(cours)。您不能通过名称（作为变量）直接引用其属性。您必须使用属性访问器（点或方括号）。

block content
    <h1>courses page</h1>
    
    if courses.length
    each cours in courses
        .row
            .col.s6.offset-s3
                .card
                    .card-image
                        img(src="#{cours.img}")
                    .card-content
                        span.card-title #{cours.title}
                        p.price #{cours.price}
                    .card-action
                        a(href="/courses/#{cours.id}") Open course

    else 
        p there are not courses

我无法从 json 获取哈巴狗变量的信息。 handlebars 可以看到信息，pug 看不到。但代码相同

I can't get information from json to pug variables. Handlebars can see information, pug can't see. but code the same

node.js

express

handlebars.js

pug