我正在尝试设置<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
};
},
答案 0 :(得分:5)
您可以在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;
},
答案 1 :(得分:1)
在Marionette中,您可以在视图中致电:
onRender: function () {
this.$('yourElement').css('whatever', 'css');
},
答案 2 :(得分:0)
执行此操作的唯一方法是使用问题中描述的样式属性传递属性。在骨干中,属性映射通过以下代码行直接传递到jQuery:
var $el = Backbone.$('<' + _.result(this, 'tagName') + '>').attr(attrs);
因此,无法将样式作为Javascript对象传递。