sproutcore set color of a labelview dynamically depending on currentdate

Question

I am rewriting a custom view to regular views. For example

Pseudo code
if (date = today) {
    context.push('...; style="color:red; ...}
else {
    context.push('...; style="color:black; ...}
;

becomes

mondayLabelView: SC.LabelView.extend({
        layout: {top:90, left:700, width:200, height:18},
        classNames: ['App-monday'],
        valueBinding: SC.Binding.oneWay('App.someController.selectedMondayDate'),
        }),

Question, how to rewrite the dynamic color part?

Answer 1

I would suggest using the classNameBindings property to dynamically add a CSS class. This way, you do not need to use the style tag.

You can view more about it at http://blog.sproutcore.com/classnamebindings-easy-dynamic-css/ but the basic idea is as follows:

mondayLabelView: SC.LabelView.extend({
   layout: {...},
   valueBinding: SC.Binding.oneWay('App.someController.selectedMondayDate'),
   isToday: function() {
     // Psuedo-code, you'll probably need SC.DateTime to actually compare the dates
     return this.get('value') == today;
   }.property('value'),
   classNameBindings: ['isToday:date-is-today'],
})

Then, in your CSS, you would have something like:

.date-is-today {
  color: red;
}

Answer 2

As an absolute (syntax) beginner, I don't know what the suggested statement 'return this.get('value') == today;' exactly means, that is the '== today' part?

Maybe asking too much, but to compare the dates and set the return value I was thinking of

tuesdayLabelView: SC.LabelView.extend({
    layout: {top:90, left:500, width:200, height:18},
    valueBinding: SC.Binding.oneWay('App.someController.selectedTuesdayDate'),
    classNameBindings: ['isToday:date-is-today'],
    isToday: function(){
        var comptuesday = this.get('value');
        var comptoday = SC.DateTime.create().toFormattedString('%A, %d %b');
        if (comptuesday === comptoday) {
            return 'date-is-today';
            } else {
            return 'normal-date';
            };
        }.property('value'),
        }),

Probably not the shortest way or beautiful syntax, but it works, any further suggestions for better syntax?