如何使用 Node.js 和 Handlebars 禁用按钮？

Question

这是一个 Node.js 博客项目。

我有一个博客。我知道如何创建一个新的 post。此 post 有截止日期。每个 post 都有一个 'Apply' 按钮。我希望项目在截止日期后禁用应用按钮。

这是我的方法：

使用要应用的日期创建一个 post 架构。
使用路由创建逻辑。
在把手中使用它。我试过了，但没有用。

这是架构：

const {Schema, model} = require('mongoose');
const UrlSlugs = require('mongoose-url-slugs');

const PostSchema = new Schema({
    user: {
        type: Schema.Types.ObjectId,
        ref: 'users'
    },
    category: {
        type: Schema.Types.ObjectId,
        ref: 'categories'
    },
    title: {
        type: String,
        require: true
    },
    slug: {
        type: String
    },
    status: {
        type: String,
        default: 'public'
    },
    allowComments: {
        type: Boolean,
        require: true
    },
    body: {
        type: String,
        require: true
    },
    file: {
        type: String
    },
    date: {
        type: Date,
        default: Date.now()
    },
    dateToApply: {
        type: Date
    },
    comments: [{
        type: Schema.Types.ObjectId,
        ref: 'comments'
    }]
}, {usePushEach: true});

PostSchema.plugin(UrlSlugs('title', {field: 'slug'}));

try {
    module.exports = model('posts', PostSchema);
} catch (e) {
    module.exports = model('posts');
}

这是路线：

router.get('/', (req, res)=>{
    const perPage = 10;
    const page = req.query.page || 1;

    let dateNow = Date.now();
    let applyDate = req.body.dateToApply;
    let button = document.getElementById('applyButton');

    function showButton() {
        if (dateNow > applyDate) {
            button.disabled = true;
        }
    }
    

    Post.find({})
        .sort({date: 'desc'})
        .skip((perPage*page)-perPage)
        .limit(perPage)
        .then(posts => {
            Post.count().then(postCount=>{
                Category.find({}).then(categories => {
                    res.render('home/index', {
                        posts: posts,
                        categories: categories,
                        current: parseInt(page),
                        pages: Math.ceil(postCount/perPage)
                    });
                });
            });
        });
});

这是把手：

<div class="row">
    <div class="col-12">
        <h1>Home page</h1>
        {{#each posts}}
            <div class="card mb-4">
                <img class="img-fluid" src="/uploads/{{ file }}" alt="Kep">
            </div>
            <div class="card-body">
                <h2 class="card-title">{{title}}</h2>
                <p class="card-text">{{body}}</p>
                <p>{{generateDate dateToApply 'MMMM DD YYYY'}}</p>
                <a href="/post/{{id}}" class="btn btn-primary">More</a>
                {{#if showButton}}
                <button id="applyBtn" class="btn btn-info">Apply</button>
                {{/if}}
            </div>
            <div class="card-footer">
                Date of post {{ generateDate date 'MMMM DD YYYY'}}
            </div>
        {{/each}}
        <ul class="pagination justify-content-center">
            {{#pagination current=current pages=pages}}{{/pagination}}
        </ul>
    </div>
</div>

Answer 1

像这样：

    router.get('/', (req, res)=>{
    const perPage = 10;
    const page = req.query.page || 1;

    let dateNow = Date.now();
    
    Post.find({})
        .sort({date: 'desc'})
        .skip((perPage*page)-perPage)
        .limit(perPage)
        .then(posts => {
            posts.forEach(post => {
                post.deadlinePassed = dateNow > post.dateToApply
            })
            Post.count().then(postCount=>{
                Category.find({}).then(categories => {
                    res.render('home/index', {
                        posts: posts,
                        categories: categories,
                        current: parseInt(page),
                        pages: Math.ceil(postCount/perPage)
                    });
                });
            });
        });
    });

并且在模板中：

<div class="row">
    <div class="col-12">
        <h1>Home page</h1>
        {{#each posts}}
            <div class="card mb-4">
                <img class="img-fluid" src="/uploads/{{ file }}" alt="Kep">
            </div>
            <div class="card-body">
                <h2 class="card-title">{{title}}</h2>
                <p class="card-text">{{body}}</p>
                <p>{{generateDate dateToApply 'MMMM DD YYYY'}}</p>
                <a href="/post/{{id}}" class="btn btn-primary">More</a>
                {{#if showButton}}
                <button id="applyBtn" class="btn btn-info" {{#if deadlinePassed}} disabled {{/if}}>Apply</button>
                {{/if}}
            </div>
            <div class="card-footer">
                Date of post {{ generateDate date 'MMMM DD YYYY'}}
            </div>
        {{/each}}
        <ul class="pagination justify-content-center">
            {{#pagination current=current pages=pages}}{{/pagination}}
        </ul>
    </div>
</div>

如何使用 Node.js 和 Handlebars 禁用按钮？

How to disabled a button using Node.js and Handlebars?

blogs

button

node.js

express

handlebars.js