javascript – 设置Backbone.View的动态css样式属性

前端之家收集整理的这篇文章主要介绍了javascript – 设置Backbone.View的动态css样式属性前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试设置< ul>的高度,宽度和背景图像.元件.

这是我为Backbone.View获得的内容

  1. var RackView = Backbone.View.extend({
  2.  
  3. tagName: 'ul',className: 'rack unselectable',template: _.template($('#RackTemplate').html()),render: function () {
  4. this.$el.html(this.template(this.model.toJSON()));
  5. return this;
  6. },attributes: function () {
  7. var isFront = this.model.get('isFront');
  8. var imageUrlIndex = isFront ? 0 : 1;
  9.  
  10. return {
  11. 'background-image': 'url(' + this.model.get('imageUrls')[imageUrlIndex] + ')','height': this.model.get('rows') + 'px','width': this.model.get('width') + 'px'
  12. };
  13. }
  14. }

这不起作用,因为属性不会写入元素的“style”属性.相反,它们被视为属性…因为函数名称而有意义,但它让我想知道 – 我如何正确地实现这样的事情?

设置后图像,高度和宽度是不可变的,如果这有助于简化…

我只是以一种风格包裹我的回报吗?这似乎过于复杂……

这是生成的HTML:

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

编辑:这有效,但我没有激怒:

  1. attributes: function () {
  2.  
  3. var isFront = this.model.get('isFront');
  4. var imageUrlIndex = isFront ? 0 : 1;
  5.  
  6. var backgroundImageStyleProperty = "background-image: url(" + this.model.get('imageUrls')[imageUrlIndex] + ");";
  7. var heightStyleProperty = "height: " + this.model.get('rows') + 'px;';
  8. var widthStyleProperty = "width: " + this.model.get('width') + 'px;';
  9.  
  10. return {
  11. 'style': backgroundImageStyleProperty + ' ' + heightStyleProperty + ' ' + widthStyleProperty
  12. };
  13. },

解决方法

您可以在渲染函数中使用jquery css函数
  1. render: function () {
  2. this.$el.html(this.template(this.model.toJSON()));
  3. var backgroundImageStyleProperty = "background-image: url(" + this.model.get('imageUrls')[imageUrlIndex] + ");";
  4. var heightStyleProperty = "height: " + this.model.get('rows') + 'px;';
  5. var widthStyleProperty = "width: " + this.model.get('width') + 'px;';
  6.  
  7. this.$el.css({
  8. 'height' : heightStyleProperty,'width' : widthStyleProperty,'background-image': backgroundImageStyleProperty
  9. });
  10.  
  11. return this;
  12. },

猜你在找的JavaScript相关文章