如何在通过javascript函数运行的玉模板中使用服务器数据？答案

【问题标题】：how to use server data in jade templating running through javascript function?如何在通过javascript函数运行的玉模板中使用服务器数据？
【发布时间】：2014-12-10 12:39:38
【问题描述】：

我正在尝试将服务器数据拉入 Jade，然后使用该数据运行一个函数以确定要自动选择的类。这用于表格自动着色单元格，具体取决于单元格的值。

通过（日期差异）运行返回数据的函数：

function inDays(date1,date2) {
    var date1=date1.split('/');
    var date2=date2.split('/');
    var d1=new Date(date1[1]+'/'+date1[0]+'/'+date1[2]);
    console.log(d1);
    var d2=new Date(date2[1]+'/'+date2[0]+'/'+date2[2]);
    console.log(d2);
    var t2=d2.getTime();
    var t1=d1.getTime();
    var days=parseInt((t2-t1)/(24*3600*1000));
    return days
}

期望的用法：

td(class!='<%- #{inDays(<%= dateCompareAgainst %>, <%= date %>)} < 5 ? "green" : "orange"') <%= date %>

但这不起作用。

当我输入以下内容时：

td(class='#{inDays(<%= dateCompareAgainst %>, <%= date %>)}') <%= date %>

它按预期显示了班级中的两个日期。我不知道如何正确地做到这一点，任何帮助将不胜感激。

【问题讨论】：

inDays 定义在哪里？
@MichaelPerrenoud 函数 inDays 定义在翡翠范围内，如下面link 中所述，然后使用 #{inDays()} 调用
Jade 都是服务器端的，你不能指望你的 inDays 函数在客户端执行，从客户端 javascript 获取参数。不完全确定<%= 的东西是什么..
@laggingreflex <%= %>是从服务端JS拉取的数据，<%- %>是Jade中要在服务端渲染的函数

标签： javascript node.js pug

【解决方案1】：

我已经设法通过将它放入 JS 文件本身来解决这个问题。我发现它有点hacky，但它有效。我使用主干利用主干的模板和渲染功能。我为每种单元格类型添加了类，以便可以使用以下内容。

这就是我根据两个单元格的日期差异自动更改颜色的方式：

render: function() {
    return this.$el.html(this.template(this.model.attributes)),
    this.$el.find(".initialsent").each(function(a, b) {
        if (b.innerText) {
            var c = b.innerText,
            d = app.formatDate(c),
            e = $(this).closest("tr").children("td.opened").text(),
            f = app.formatDate(e);
            $(this).closest("tr").children("td.initialsent").addClass(app.inDays(f, d) < 3 ? "green" : app.inDays(f, d) < 5 ? "orange" : "red")
        }
        else {
            var g = new Date,
            e = $(this).closest("tr").children("td.opened").text(),
            f = app.formatDate(e);
            $(this).closest("tr").children("td.initialsent").addClass(app.inDays(f, g) < 3 ? "green" : app.inDays(f, g) < 5 ? "orange" : "red")
        }
    }),
    this
}

【讨论】：