how to use server data in jade templating running through javascript function?

Question

I am trying to pull server data into Jade and then use the data to run through a function in order to determine what class to automatically select. This is used on tables to auto colour cells, depending on the value of the cell.

function to run the returned data through (date diff):

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
}

desired usage:

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

this however does not work.

when I put the following:

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

it shows the two dates in the class as expected. I'm at a loss on how to do this correctly, any help would be appreciated.

@MichaelPerrenoud the function inDays is defined in the scope of jade as mentioned in the following link then called using #{inDays()} — NItroGhost
– NItroGhost, Commented Oct 15, 2014 at 13:08
Jade is all server-side, you can't expect your inDays function to execute on client-side taking parameters from client-side javascript. Not exactly sure what <%= stuff is.. — laggingreflex
– laggingreflex, Commented Oct 17, 2014 at 9:20
@laggingreflex <%= %> is the data pulled from the server side JS and <%- %> is a function to be rendered server side in Jade — NItroGhost
– NItroGhost, Commented Oct 17, 2014 at 11:34

NItroGhost · Accepted Answer · 2014-10-17 11:25:56Z

I have managed to solve this by putting it within the JS file itself. I find it to be a little hacky but it works. I use backbone making use of the templating and rendering functions of backbone. I added classes to each cell type so that the following can be used.

This is how I automatically change colours dependant on the date diff of two cells:

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
}

Collectives™ on Stack Overflow

how to use server data in jade templating running through javascript function?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related