logo标签列表

设置Backbone.View的动态CSS样式属性

javascriptbackbone.jsbackbone-views
8

我正在尝试设置一个 <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'
        };
    }
}

这个不起作用，因为属性没有写入元素的“style”属性中。相反，它们像属性一样被处理...由于函数名，这很合理，但让我想知道——我该如何正确地实现这样的东西？
如果有帮助的话，图像、高度和宽度在设置后是不可变的...
我只需要将返回值包装在样式中吗？那似乎过于复杂了...
这里是生成的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
    };
},
3个回答
6
你可以在你的渲染函数中使用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 中选择一个节点？ - Ashish Sajwan
2
在Marionette中，您可以在视图中直接调用以下代码：

onRender: function () {
  this.$('yourElement').css('whatever', 'css');
},
0
唯一的方法是使用样式属性传递属性，如问题所述。在backbone中，属性映射通过以下代码直接传递到jQuery：
var $el = Backbone.$('<' + _.result(this, 'tagName') + '>').attr(attrs);

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接