sproutcore задает цвет метки динамически в зависимости от текущей даты

Question

Я переписываю пользовательский вид в обычный вид. Например

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

становится

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

Вопрос, как переписать часть динамического цвета?

Answer 1

Я бы предложил использовать classNameBindings свойство динамически добавлять класс CSS. Таким образом, вам не нужно использовать style тег.

Вы можете узнать больше об этом на http://blog.sproutcore.com/classnamebindings-easy-dynamic-css/ но основная идея заключается в следующем:

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'],
})

Тогда в вашем CSS у вас будет что-то вроде:

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

Answer 2

Как абсолютный (синтаксис) новичок, я не знаю, что предложенное утверждение "вернуть this.get(" значение ") == сегодня;" точно означает, что это часть "== сегодня"?

Может быть, просить слишком много, но сравнить даты и установить возвращаемое значение, о котором я думал

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

Вероятно, не самый короткий путь или красивый синтаксис, но это работает, какие-либо дальнейшие предложения для лучшего синтаксиса?