是否可以通过外部 .js 文件访问 Handlebar 变量？

Question

尽管我们现在正在经历大流行，但我希望一切都好。我目前正在做一个学校项目，发现自己陷入了一个无休止的循环，试图解决问题。我正在寻找一种方法来访问我的路由处理程序传递到我的车把模板到我单独的 javascript 文件的数据。

请参阅下面的附加代码：

index.js（将变量传递到我的把手模板的路由处理程序）

app.get('/', function(req, res){
    if (req.session.loggedin){
        professorModel.aggregate([{ $sample: { size: 3 } }]).then(function(qvProfs) {
            reviewModel.find({}).populate('profRef').populate('studentRef').sort({_id:-1}).limit(10).exec(function(err,mostRecent) {
                collegeModel.find({}).exec(function(err, col){
                    var colleges = [];
                    var reviews = [];

                    col.forEach(function(document){
                        colleges.push(document.toObject());
                    });

                    mostRecent.forEach(function(document){
                        reviews.push(document.toObject());
                    });

                    res.render('frontend/home',{
                        studentRef: req.session.studentRef,
                        idNum: req.session.idNum,
                        colleges: colleges,
                        data: qvProfs,
                        review: reviews,
                        title: 'Home',
                    });
                });
            });
        });
    }
    else{
        res.redirect('/login')
    };
});

主布局（'frontend/home'正在使用的布局）

<script src="/js/script.js"></script>

script.js（操作html的外部.js文件）

    var newReview = {
      profName: $('#revProfName').find(":selected").text(),
      profCourse: $('#revProfCourse').find(":selected").text(),
      studentRef: "{{req.session.studentRef}}",
      studentId: "{{req.session.idNum}}",
      reviewContent: $("textarea#revContent").val()
    };

每次我做 console.log(newReview) 时，我总是得到 {{req.session.studentRef}} 和 {{req.session.idNum}} 而不是实际值。任何帮助将不胜感激。谢谢大家！

Answer 1

好的，看起来没有直接的方法让它工作，因为车把不解释单独的 js 文件，但这里有一个 hack。

1st 您需要在视图文件中传递数据 window 范围。如果要传递 json/javascript 对象数据，首先要注册一个辅助函数。

可以找到有关此的更多信息

hbs.registerHelper('json', function(context) {
    return JSON.stringify(context);
});

第 2 步：在视图文件中将数据添加到 window 范围。

// if both variables you are sending are objects
window.studentRef = JSON.parse('{{{json studentRef}}}');
window.studentId = JSON.parse('{{{json studentRef}}}');
// if the variables you are sending are int or string
window.studentRef = {{studentRef}};
window.studentId = "{{studentRef}}";

然后您可以在 window 加载侦听器时从您的 js 文件中的 windows 范围访问这些内容。

// inside your js file
window.addEventListener('load', () => {

    var newReview = {
      profName: $('#revProfName').find(":selected").text(),
      profCourse: $('#revProfCourse').find(":selected").text(),
      studentRef: window.studentRef,
      studentId: window.studentId,
      reviewContent: $("textarea#revContent").val()
    };
})

希望你有实现它的想法。

是否可以通过外部 .js 文件访问 Handlebar 变量？

Is it possible to access a Handlebar variable through an external .js file?

javascript

jquery

node.js

express

express-handlebars