0

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

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

问题，如何重写动态颜色部分？

4

2 回答 2

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;
}
于 2016-09-12T15:35:07.093 回答
0

作为一个绝对（语法）初学者，我不知道建议的语句'return 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'),
        }),

可能不是最短的方法或漂亮的语法，但它有效，还有什么更好的语法建议吗？

于 2016-09-13T10:16:27.510 回答