बैकबोन की गतिशील सीएसएस-शैली गुणों को सेट करना।

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> 

संपादित करें: यह काम करता है, लेकिन मैं नहीं कर रहा हूँ stoked:

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 इस्तेमाल कर सकते हैं आपके 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

ऐसा करने का एकमात्र तरीका प्रश्न में वर्णित शैली विशेषता का उपयोग करके विशेषताओं में गुजरना है। रीढ़ की हड्डी में, विशेषता नक्शे कोड की इस पंक्ति से jQuery में सीधे पारित कर दिया है:

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

तो, वहाँ एक जावास्क्रिप्ट वस्तु के रूप में शैलियों में पारित करने के लिए कोई रास्ता नहीं है।

Answer 3

कठपुतली में, सही अपने ध्यान में रखते हुए आप कॉल कर सकते हैं:

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