javascript 设置 Backbone.View 的动态 css 样式属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18391607/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting dynamic css-style properties of a Backbone.View
提问by Sean Anderson
I'm trying to set the height, width and background image of a <ul>element.
我正在尝试设置<ul>元素的高度、宽度和背景图像。
Here's what I've got for my Backbone.View:
这是我的 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'
};
}
}
This doesn't work because the attributes are not written into a 'style' property of the element. Instead, they're treated like attributes... which makes sense because of the function name, but it has left me wondering -- how do I achieve something like this properly?
这不起作用，因为属性未写入元素的“样式”属性。相反，它们被当作属性对待......由于函数名称，这很有意义，但它让我想知道 - 我如何正确实现这样的东西？
The image, height and width are immutable after being set, if that helps simplify...
设置后图像、高度和宽度是不可变的，如果这有助于简化...
Do I just wrap my return in a style? That seems overly convoluted...
我只是用一种风格来包装我的退货吗？好像太绕了……
Here's the generated HTML:
这是生成的 HTML：
<ul background-image="url(data:image/png;base64,...)" height="840px" width="240px" class="rack unselectable">
</ul>
EDIT:This works, but I'm not stoked:
编辑：这有效，但我没有被激怒：
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
};
},
回答by cclerv
You could just use the jquery css function in your renderfunction:
你可以在你的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;
},
回答by Cesar Martinez Dominguez
In Marionette, right in your view you can call:
在 Marionette 中，您可以直接在视图中调用：
onRender: function () {
this.$('yourElement').css('whatever', 'css');
},
回答by Kevin Borders
The only way to do this is to pass in the attributes using a style attribute as described in the question. In backbone, the attribute map is passed directly into jQuery by this line of code:
这样做的唯一方法是使用问题中描述的样式属性传递属性。在backbone中，属性映射是通过这行代码直接传入jQuery的：
var $el = Backbone.$('<' + _.result(this, 'tagName') + '>').attr(attrs);
So, there is no way to pass in styles as a Javascript object.
因此，无法将样式作为 Javascript 对象传递。
