设置 Backbone.View 的动态 css 样式属性答案

【问题标题】：Setting dynamic css-style properties of a Backbone.View设置 Backbone.View 的动态 css 样式属性
【发布时间】：2013-08-22 22:07:01
【问题描述】：

我正在尝试设置<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>

编辑：这行得通，但我没有被激怒：

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

【问题讨论】：

标签： javascript backbone.js backbone-views

【解决方案1】：

您可以在 render 函数中使用 jquery css 函数：

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

【讨论】：

如何在 $el 中选择节点？？

【解决方案2】：

在 Marionette 中，您可以在您的视图中调用：

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

【讨论】：

【解决方案3】：

这样做的唯一方法是使用问题中描述的样式属性传入属性。在主干中，属性映射通过这行代码直接传递给jQuery：

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

因此，没有办法将样式作为 Javascript 对象传递。

【讨论】：