我正在尝试设置< 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 }; },
解决方法
您可以在渲染函数中使用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; },
原文地址:https://www.jb51.cc/js/158151.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。