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

Question

這是一個 Node.js 博客項目。

我有一個博客。 我知道如何創建一個新帖子。 這篇文章有截止日期。 每個帖子都有一個“應用”按鈕。 我希望項目在截止日期后禁用“應用”按鈕。

這是我的方法：

1. 使用要應用的日期創建帖子模式。
2. 使用路由創建邏輯。
3. 在車把中使用它。 我試過但不起作用。

這是架構：

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>