設置Backbone的動態CSS樣式屬性。查看

我在設置<ul>元素的高度，寬度和背景圖像。設置Backbone的動態CSS樣式屬性。查看

這裏就是我有我的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>

編輯：這工作，但我不會火上澆油：

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

來源

2013-08-22 Sean Anderson

你可以只使用了jQuery css功能在你的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; 
},

來源

2014-03-31 06:57:44 cclerville

如何在$ EL與選擇的節點？ –

執行此操作的唯一方法是使用問題中所述的樣式屬性傳遞屬性。在骨幹網中，屬性地圖直接傳遞到jQuery的這一行代碼：

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

那麼，有沒有辦法在樣式，JavaScript對象通過。

來源

2014-12-12 21:28:24

在木偶，就在你看來，你可以撥打：

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

來源

2017-09-22 13:41:31

設置Backbone的動態CSS樣式屬性。查看

回答

相關問題