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

我建议使用 classNameBindings 属性动态添加 CSS class。这样，您就不需要使用 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

作为一个绝对（语法）初学者，我不知道建议的语句'return this.get('value') == today;'确切的意思是，那是“==今天”的部分？

也许要求太多了，但是比较日期并设置我正在考虑的 return 值

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

可能不是最短的方式或优美的语法，但它确实有效，还有更好的语法建议吗？

sproutcore 根据当前日期动态设置 labelview 的颜色

sproutcore set color of a labelview dynamically depending on currentdate

sproutcore

sproutcore-controllers

sproutcore-views