Javascript 样式绑定中的Knockout.js图像

我花了最后一个小时在这上面，我知道这将是一件小事。。。我试图使用一个可计算的（或可观察的，我觉得我已经尝试了各种方法）为模型嵌入背景图像，它要么告诉我“未定义”，要么根本不计算值。我最近失败的尝试和错误

视图（haml）

没有错误，但不会渲染

.columns.large-10.background{"data-bind" => "with: currentEvent, style: { backgroundImage}"}  

错误：未定义图像

.columns.large-10.background{"data-bind" => "with: currentEvent, style: { backgroundImage: 'url(' + image() + ')' }"}    

模型

    function Item(data) {
        this.name = ko.observable(data.name);
        this.isDone = ko.observable(data.isDone);
    }

    function Event(data) {
        var self = this;
        self.name = ko.observable(new EditableText(data.name, false));
        self.description = ko.observable(new EditableText(data.description, false));
        self.date = ko.observable(new EditableText(data.date, false));
        self.location = ko.observable(new EditableText(data.location, false));
        self.state = ko.observable(new EditableText(data.state, false));
        self.city = ko.observable(new EditableText(data.city, false));
        self.zip = ko.observable(new EditableText(data.zip, false));
        self.allow_guest_create = ko.observable(new EditableText(data.allow_guest_create, false));
        self.host_name = ko.observable(new EditableText(data.host_name, false));
        self.street_address = ko.observable(new EditableText(data.street_address, false));
        self.start_time = ko.observable(new EditableText(data.start_time, false));
        self.end_time = ko.observable(new EditableText(data.end_time, false));
        self.event_type = ko.observable(new EditableText(data.event_type, false));
        self.image = ko.observable(data.image);
        self.backgroundImage = ko.computed(function() {
            return { "backgroundImage": 'url('+self.image+')' };
        }, self);
        self.bgImageUrlStyle = ko.computed(function() {
            return "url(" + self.image() + ")";
        });
        self.edit = function (model) {
            console.log(model.text())
            model.editing(true);
        };
    }

    function EditableText(text, editable) {
        var self = this;
        self.text = ko.observable(text);
        self.editing = ko.observable(false);
    }


    function MasterVM() {
        var self = this;    
        self.newItemName = ko.observable();
        self.items = ko.observableArray([]);
        self.events = ko.observableArray([]);

        self.currentEvent = ko.observable();

        self.addEvent = function(data) { self.events.push(new Event(data));};

        self.removeEvent = function(event) { self.events.remove(event) }

        self.addItem = function() {
            self.items.push(new Item({ name: self.newItemName() }));
            self.newItemName("");
        };

        self.removeItem = function(item) { self.items.destroy(item);};

        self.save = function(data) {
            console.log(ko.toJSON({ event: self }))
            $.ajax("/events", {
                data: ko.toJSON({ event: self }),
                type: "post", contentType: "application/json",
                success: function(result) { console.log(result) }
            });
        }

        self.getEvent = function(data) {
            $.ajax("/events/", {
                data: { id: 50 },
                type: "get", contentType: "application/json",
                success: function(result) { 
                    console.log(result)
                    self.currentEvent(new Event(result));
                }
            });
        }

        self.getEvent();
    }

---

问题是您的

与
绑定与
样式
绑定位于同一元素上

但是
with
仅适用于其子级，因此您需要在样式绑定中写入
currentEvent（）。
以访问事件对象的属性：

.columns.large-10.background{"data-bind" => "with: currentEvent, 
    style: currentEvent() && currentEvent().backgroundImage"} 

但是在这种情况下，您需要处理
currentEvent（）
为null的情况，并且
和
的编码将出现问题（）

一个更合适的解决方案是使用无容器语法将带有
的
绑定移到div之外

/ ko with: currentEvent
.columns.large-10.background{"data-bind" => "style: backgroundImage"}
/ /ko  

旁注：您的
背景图像中缺少一个在self之后计算的
（）
。图像：

self.backgroundImage = ko.computed(function() {
        return { "backgroundImage": 'url(' + self.image() + ')' };
}, self);

演示。
我已经有一段时间没能完成这个项目了，请原谅我反应太晚。这是我收到的最有帮助的回复之一，你很清楚自己在做什么。非常感谢你！！！