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')
    };
});

主布局（“前端/家庭”正在使用的布局）

<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文件，但是这里有个问题。

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

有关此内容的更多信息，here.

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

第二步：在视图文件中，将数据添加到窗口范围。

// 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}}";

然后，您可以在窗口加载侦听器上从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变量？

1 个答案: