0

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.

NItroGhost
  • 7
  • 4
  • Where is `inDays` defined? – Mike Perrenoud Oct 15 '14 at 12:48
  • @MichaelPerrenoud the function inDays is defined in the scope of jade as mentioned in the following [link](http://stackoverflow.com/questions/20940860/javascript-function-execution-inside-jade-template) then called using #{inDays()} – NItroGhost Oct 15 '14 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 Oct 17 '14 at 09:20
  • @laggingreflex `<%= %>` is the data pulled from the server side JS and `<%- %>` is a function to be rendered server side in Jade – NItroGhost Oct 17 '14 at 11:34

1 Answers1

0

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
}
NItroGhost
  • 7
  • 4