Настройка динамических свойств CSS-стиля Backbone.View

Question

Я пытаюсь установить высоту, ширину и фоновое изображение элемента <ul>.

Вот что у меня есть для моего 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' 
     }; 
    } 
} 

Это не работает, потому что атрибуты не записываются в собственность «стиль» элемента. Вместо этого они обрабатываются как атрибуты ... что имеет смысл из-за имени функции, но это заставило меня задуматься - как мне добиться чего-то подобного?

изображение, высота и ширина неизменны после устанавливается, если это помогает упростить ...

ли я просто обернуть мое возвращение в стиле? Это кажется слишком запутанным ...

Вот сгенерированный HTML:

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

EDIT: Это работает, но я не топил:

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

Вы можете просто использовать JQuery css в вашей функции render:

Answer 2

Единственный способ сделать это - передать атрибуты с помощью атрибута style, как описано в вопросе. В позвоночнике, карта атрибут передается непосредственно в JQuery этой строки кода:

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

Таким образом, нет никакого способа, чтобы пройти в стилях как объект Javascript.

Answer 3

В марионеток, прямо на ваш взгляд, можно назвать:

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