Festlegen von dynamischen CSS-Style-Eigenschaften eines Backbone.View

Question

Ich versuche, die Höhe, Breite und Hintergrundbild eines Elements <ul> festlegen.

Hier ist, was ich für meine Backbone.View bekam:

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

Das funktioniert nicht, weil die Attribute in einen ‚Stil‘ Eigenschaft des Elements nicht geschrieben werden. Stattdessen werden sie wie Attribute behandelt ... was wegen des Funktionsnamens Sinn macht, aber ich habe mich gefragt - wie erreiche ich so etwas richtig?

Das Bild, Höhe und Breite sind unveränderlich nach eingestellt werden, wenn das vereinfachen hilft ...

Sie meine Rückkehr in einem Stil, den ich wickeln gerade? Das scheint übermäßig gewundenen ...

Hier ist die erzeugte HTML:

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

EDIT: Dies funktioniert, aber ich bin nicht begeistert:

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

Sie könnten nur die jQuery CSS-Funktion in Ihrer render Funktion:

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

Die einzige Möglichkeit besteht darin, die Attribute mit einem style-Attribut wie in der Frage beschrieben zu übergeben. Im Backbone ist das Attribut Karte durch diese Codezeile direkt in jQuery übergeben:

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

So gibt es keine Möglichkeit, in verschiedenen Schnitten als Javascript-Objekt übergeben.

Answer 3

In Marionette, rechts in der Ansicht können Sie anrufen:

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