Sto provando a impostare l'altezza, la larghezza e l'immagine di sfondo di un elemento <ul>
.Impostazione delle proprietà dinamiche stile css di un Backbone.View
Ecco quello che ho per il mio 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'
};
}
}
Questo non funziona perché gli attributi non sono scritti in una proprietà 'stile' dell'elemento. Invece, sono trattati come attributi ... il che ha senso a causa del nome della funzione, ma mi ha lasciato a chiedermi: come ottengo qualcosa del genere?
L'immagine, altezza e la larghezza sono immutabili dopo essere stato impostato, se questo aiuta a semplificare ...
Devo Basta avvolgere il mio ritorno in uno stile? Che sembra eccessivamente contorto ...
Ecco il codice HTML generato:
<ul background-image="url(data:image/png;base64,...)" height="840px" width="240px" class="rack unselectable">
</ul>
EDIT: questo funziona, ma io non sono entusiasta:
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
};
},
come selezionare un nodo con in $ el ?? –