Ustawianie właściwości dynamicznego stylu CSS obiektu Backbone.View

Question

Próbuję ustawić wysokość, szerokość i obraz tła elementu <ul>.

Oto co mam na moim Backbone.View:

var RackView = Backbone.View.extend({ 

    tagName: 'ul', 

    className: 'rack unselectable', 

    template: _.template($('#RackTemplate').html()), 

    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    }, 

    attributes: function() { 
     var isFront = this.model.get('isFront'); 
     var imageUrlIndex = isFront ? 0 : 1; 

     return { 
      'background-image': 'url(' + this.model.get('imageUrls')[imageUrlIndex] + ')', 
      'height': this.model.get('rows') + 'px', 
      'width': this.model.get('width') + 'px' 
     }; 
    } 
} 

To nie działa, ponieważ atrybuty nie są napisane w stylu „” własności elementu. Zamiast tego są traktowani jak atrybuty ... co ma sens ze względu na nazwę funkcji, ale to mnie zastanowiło - jak mogę osiągnąć coś takiego poprawnie?

Obraz, wysokość i szerokość są niezmienne po ustawiona, jeśli pomaga uprościć ...

Czy ja po prostu zawinąć mój powrót w stylu? To wydaje się zbyt zawiłe ...

Oto wygenerowany HTML:

<ul background-image="url(data:image/png;base64,...)" height="840px" width="240px" class="rack unselectable"> 
</ul> 

EDIT: To działa, ale nie jestem podsycane:

attributes: function() { 

    var isFront = this.model.get('isFront'); 
    var imageUrlIndex = isFront ? 0 : 1; 

    var backgroundImageStyleProperty = "background-image: url(" + this.model.get('imageUrls')[imageUrlIndex] + ");"; 
    var heightStyleProperty = "height: " + this.model.get('rows') + 'px;'; 
    var widthStyleProperty = "width: " + this.model.get('width') + 'px;'; 

    return { 
     'style': backgroundImageStyleProperty + ' ' + heightStyleProperty + ' ' + widthStyleProperty 
    }; 
}, 

Answer 1

Można po prostu użyć jQuery Funkcja css w swojej funkcji render:

render: function() { 
    this.$el.html(this.template(this.model.toJSON())); 
    var backgroundImageStyleProperty = "background-image: url(" + this.model.get('imageUrls')[imageUrlIndex] + ");"; 
    var heightStyleProperty = "height: " + this.model.get('rows') + 'px;'; 
    var widthStyleProperty = "width: " + this.model.get('width') + 'px;'; 

    this.$el.css({ 
    'height'   : heightStyleProperty, 
    'width'   : widthStyleProperty, 
    'background-image': backgroundImageStyleProperty 
    }); 

    return this; 
}, 

Answer 2

Jedynym sposobem na to jest przekazanie atrybutów za pomocą atrybutu stylu opisanego w pytaniu. W szkielecie, mapa atrybut jest przekazywana bezpośrednio do jQuery przez tę linię kodu:

var $el = Backbone.$('<' + _.result(this, 'tagName') + '>').attr(attrs); 

Tak, nie ma sposobu, aby przejść w stylach jak obiekt JavaScript.

Answer 3

W Marionette, bezpośrednio w widoku można nazwać:

onRender: function() { 
    this.$('yourElement').css('whatever', 'css'); 
},