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（'value'）== today;'确切意味着，那就是'==今天'部分？

也许要求太多，但要比较日期并设定我想到的返回值

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根据currentdate动态设置labelview的颜色

2 个答案: