Question

我花了最后一小时才知道这件事，我知道它会变得很小......我试图使用可计算的（或可观察的）为模型嵌入背景图像，我觉得我已经尝试了各种方式）它要么告诉我＆＃34;没有定义＆＃34;或者根本不计算价值。我最近失败的尝试和错误。

查看（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();
    }

Answer 1

问题是您的with绑定与style绑定位于同一元素上。

但with仅适用于其子代，因此您需要在样式绑定中编写currentEvent().以访问事件对象的属性：

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

但在这种情况下，您需要处理currentEvent()为空时的情况，并且您将遇到&（How could I escape a & in Haml so that it compiles to & instead of &? (Haml noob)）的编码问题

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

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

旁注：你在self.image之后计算的()中缺少backgroundImage：

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

演示JSFiddle。

样式绑定中的Knockout.js图像

1 个答案: