sproutcore labelview의 색상을 현재 날짜에 따라 동적으로 설정합니다.

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

동적으로 CSS 클래스를 추가하려면 classNameBindings 속성을 사용하는 것이 좋습니다. 이렇게하면 style 태그를 사용할 필요가 없습니다.

당신은 http://blog.sproutcore.com/classnamebindings-easy-dynamic-css/에서 그것에 대해 더 볼 수 있지만 다음과 같이 기본 개념은 다음과 같습니다 (절대로

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

Answer 2

: 당신의 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'], 
}) 

그런 다음 같은 것을 할 것이다 구문) 초급, 내가 무슨 제안 문 'return this.get ('value ') == 오늘;'모르겠다. 정확히 '== 오늘'부분을 의미합니까?

아마 더 나은 구문, 더 이상의 제안을 너무 많이 요구하는,하지만 난

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

아마

하지 짧은 길이나 아름다운 구문의 생각 반환 값을 날짜를 비교하고 설정할 수 있지만, 그것은 작동?