sproutcore - Sproutcore 根据当前日期动态设置标签 View 的颜色

Question

我正在将自定义 View 重写为常规 View 。例如

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;
}