我有一个使用把手的网站，但是当我尝试丰富其中一个页面时出现错误

Question

我创建了一个基于 KeystoneJS 的网站，它使用了车把。我为他们创建了一些模型和模板。但是当我尝试访问我的网站页面之一时，出现以下错误：

Handlebars: Access has been denied to resolve the property "title" because it is not an "own property" of its parent.
You can add a runtime option to disable the check or this warning:
See https://handlebarsjs.com/api-reference/runtime-options.html#options-to-control-prototype-access for details
Handlebars: Access has been denied to resolve the property "coverImage" because it is not an "own property" of its parent.
You can add a runtime option to disable the check or this warning:
See https://handlebarsjs.com/api-reference/runtime-options.html#options-to-control-prototype-access for details
Handlebars: Access has been denied to resolve the property "duration" because it is not an "own property" of its parent.
You can add a runtime option to disable the check or this warning:
See https://handlebarsjs.com/api-reference/runtime-options.html#options-to-control-prototype-access for details
Handlebars: Access has been denied to resolve the property "distance" because it is not an "own property" of its parent.
You can add a runtime option to disable the check or this warning:
See https://handlebarsjs.com/api-reference/runtime-options.html#options-to-control-prototype-access for details
Handlebars: Access has been denied to resolve the property "price" because it is not an "own property" of its parent.
You can add a runtime option to disable the check or this warning:
See https://handlebarsjs.com/api-reference/runtime-options.html#options-to-control-prototype-access for details
Handlebars: Access has been denied to resolve the property "content" because it is not an "own property" of its parent.
You can add a runtime option to disable the check or this warning:
See https://handlebarsjs.com/api-reference/runtime-options.html#options-to-control-prototype-access for details
Handlebars: Access has been denied to resolve the property "images" because it is not an "own property" of its parent.
You can add a runtime option to disable the check or this warning:
See https://handlebarsjs.com/api-reference/runtime-options.html#options-to-control-prototype-access for details

这是我要访问的页面的代码：

<!DOCTYPE html>

<html lang="en">
<head>
    <title>{{#if data.trip}}{{data.trip.title}}{{/if}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/styles/custom/trip.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        function showDiv () {
            let order = document.getElementById("order");
            if (order.style.display === 'flex') {
                order.style.display = 'none';
            } else {
                order.style.display = 'flex';
            }
        }
    </script>
</head>
<body>
    {{#if data.trip}}
        <div class="container" style="background: url('{{ cloudinaryUrl data.trip.coverImage }}') center no-repeat; background-size: cover; ">
            <div class="tour">
                <div class="content">
                    <h1 class="title">{{data.trip.title}}</h1>
                    <div class="info">
                        <p class="item">Duration: <br>{{data.trip.duration}}</p>
                        <p class="item">Distance: <br>{{data.trip.distance}}</p>
                        <p class="item">Price: <br>{{data.trip.price}}€</p>    
                    </div>
                    {{#if data.trip.content.additional}}
                        <div class="additional">
                            <p>{{{data.trip.content.additional}}}</p>
                        </div>
                    {{/if}}
                </div>
            </div>
        </div>
        <div class="extended">
            <p class="text">{{# if data.trip.content.extended }} {{{data.trip.content.extended}}} {{/if}}</p>
        </div>
        <div class="photos">
            {{#each data.trip.images }}
                <img src="{{cloudinaryUrl}}" class="list-photo" alt="{{../data.trip.title}} Photo">
            {{/each}}
        </div>
        <div class="order-container">
            <button class="order" onclick="showDiv()">Order</button>
            <div id="order" class="order-form">
                <h1 class="form-title">Order</h1>
                <form class="form-container" id="order-trip-form" name="simple-contact-form" accept-charset="utf-8" action="https://formspree.io/info@seebelarus.by" method="post">
                    <div class="input-1">
                        <input class="input input-name" type="text" name="name" placeholder="Name" required="required">
                        <input class="input input-email" type="email" name="email" placeholder="Email" required="required">
                        <input class="input input-phone" type="telephone" name="telephone" placeholder="Phone (Optional)" required="">
                        <input class="input input-number" type="number" name="plus" placeholder="Number of people" required="required">
                    </div>
                    <div class="input-2">
                        <input class="input input-place" type="text" name="street" placeholder="Place to meet" required="required">
                        <input class="input input-date" type="date" name="date" placeholder="Date" required="required">
                        <textarea class="comments" name="message" placeholder="Any comments" required=""></textarea>
                    </div>
                    <div class="submit-buttons">
                        <input type="hidden" name="_subject" id="email-subject" value="Contact Form Submission">
                        <input type="submit" value="Submit" class="input-button" id="button-submit">
                    </div>
                </form>
            </div>
        </div>
    {{/if}}
</body>
</html>

这是我的路线文件：


let keystone = require('keystone');

exports = module.exports = function (req, res) {

    let view = new keystone.View(req, res);
    let locals = res.locals;

    // Set locals
    locals.section = 'tours';
    locals.filters = {
        trip: req.params.trip,
    };
    locals.data = {
        trip: [],
    };

    view.on('init', function (next) {


        keystone.list('Trip').model.findOne({
            slug: locals.filters.trip,
        }).exec(function (err, results) {
            locals.data.trip = results;
            console.log(locals.data.trip);
            next(err);
        });

    });


    view.render('trip');
};

最后，这是模型：

let keystone = require('keystone');
let Types = keystone.Field.Types;

let Trip = new keystone.List('Trip', {
    map: { name: 'title' },
    singular: 'Trip',
    plural: 'Trips',
    autokey: { path: 'slug', from: 'title', unique: true },
});

Trip.add({
    title: { type: String, required: true },
    content: {
        extended: { type: Types.Html, wysiwyg: true, height: 400 },
        additional: { type: Types.Html, wysiwyg: true, height: 300 },
    },
    category: { type: Types.Relationship, ref: 'TripCategory' },
    duration: { type: Types.Html, wysiwyg: false },
    distance: { type: Types.Html, wysiwyg: false },
    price: { type: Number },
    images: { type: Types.CloudinaryImages },
    coverImage: { type: Types.CloudinaryImage },
});

Trip.register();

这就是它的工作原理：

它是这样工作的：

顺便说一下，我检查了错误中显示的link，但我不知道我必须在哪里使用allowProtoPropertiesByDefault（我想我必须使用这个代码） .

这是 link：https://handlebarsjs.com/api-reference/runtime-options.html#options-to-control-prototype-access

Answer 1

当我有 4.0.3 版的 express-handlebars 时，我遇到了同样的问题。我安装了 3.0.2 版本（npm install express-handlebars@3.0.2），我不再有这个问题了。

Answer 2

我尝试更改车把的版本，但没有用。但是，在尝试进一步阅读之后，我发现了以下内容。

运行 npm install @handlebars/allow-prototype-access

运行 npm install express-handlebars

 // require these packages into your target, in my case I required it in app.js  where I run my server and other sets the templating engine.

const Handlebars = require('handlebars')
const { allowInsecurePrototypeAccess } = require('@handlebars/allow-prototype-access')
const exphbs = require('express-handlebars');

// load engines as such

app.engine('handlebars', exphbs({
 defaultLayout: 'home',
 handlebars: allowInsecurePrototypeAccess(Handlebars)
}));
app.set('view engine', 'handlebars');

并重新运行您的应用。它对我有用，而无需降级所用车把的版本。所以我想我会为大多数人工作。

有关更多信息，请阅读我使用的以下文章。 https://www.npmjs.com/package/@handlebars/allow-prototype-access 在 用法部分（express-handlebars 和 mongoose）

Answer 3

我在更新我的 keystonejs 经典项目后遇到了这个问题。

TL;DR 此 express-handlebars 拉修复它 https://github.com/express-handlebars/express-handlebars/pull/53

在你的 package.json 文件

中将 express-handlebars 更新到 4.0.6 或更高版本（我使用 3.x 的 5.1.0 并且工作正常）

然后您需要在 keystone.js

中的 extname: '.hbs' 之后将以下内容添加到您的 'custom engine'

  runtimeOptions: {
    allowProtoPropertiesByDefault: true,
    allowProtoMethodsByDefault: true
  }

瞧

我有一个使用把手的网站，但是当我尝试丰富其中一个页面时出现错误

I have a website, that uses handlebars, but when I try to rich one of the pages I get an error

javascript

node.js

handlebars.js

keystonejs