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

问题描述 投票：0回答：1

我已经创建了一个基于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/[email protected]" 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();

这就是它必须如何工作的：enter image description here

这就是它的工作方式：enter image description here

顺便说一句，我检查了错误中显示的链接，但是我不知道必须在哪里使用allowProtoPropertiesByDefault（我想我必须完全使用此代码）。

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

javascript node.js handlebars.js keystonejs
1个回答
0
投票

当我有4.0.3版的Express-Handlebars时，我遇到了同样的问题。我安装了3.0.2版本（npm install [email protected]），我不再有此问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.