Knockoutjs:当图像为空或为空时隐藏图像

Knockoutjs: hide image when emty or null

本文关键字:图像 隐藏 Knockoutjs      更新时间:2023-09-26

我试图在网页上第一次实现knockoutjs。我偶然发现了以下问题,但也许这也是"最佳实践"的一个例子。

我有一个产品页面,一个产品可以有一个产品图像。当没有可用的产品图像时,该属性被设置为null,我需要显示"没有可用的图像"的图片。

我的模型:

function ProductOverview() {
     var self = this;
     self.guid = ko.observable();
     self.Image = ko.observable();
     self.IsActive = ko.observable(false);
}

我的视图模型:

function productOverviewModelView() {
var self = this;
self.productOverview = new ProductOverview();
self.ShowNoImage = ko.computed(function () {
    if (self.productOverview.Image() === null || self.productOverview.Image() === "") {
        return true;
    } else {
        return false;
    }
}, this);
self.ImageAvailable = ko.computed(function () {
    if (self.productOverview.Image() === null || self.productOverview.Image === "") {
        return false;
    } else {
        return true;
    }
}, this);
//whenever the device is changed call this function
self.selectedProduct.subscribe(function () {
    if (self.selectedProduct === "") {
        self.productOverview = null;
    } else {
        $.ajax({
            type: "POST",
            url: "productoverview.aspx/getdevice",
            data: "{'guid':'" + self.selectedProduct() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var product = JSON.parse(unescape(data.d));
                self.productOverview.guid(product.guid);
                self.productOverview.Image(product.Image);
                self.productOverview.IsActive(product.IsActive);
            }
        });
    }
});

}

我的观点:

<div style="display:inline-block;">
  <img alt="" src="#" data-bind="attr: { src: productOverview.Image }" />
  <img alt="" src="../../images/no-image-available.jpg" data-bind="visible:ShowNoImage" />
</div>

它可以工作,但是像这样它不工作:

<img alt="" src="../../images/no-image-available.jpg" data-bind="visible: productOverview.Image != ''" />

是否有更短的方法,而不是使计算的可观测值?

我还想在产品活动时显示活动图像:

<img src="../../images/active_icon.gif" data-bind="visible: productOverview.isActive" />

但是这个图像没有显示,为什么?

另一种方式,我能像这样显示非活动图像吗?

<img src="../../images/notactive_icon.gif" data-bind="visible: !productOverview.isActive" />

关于您的问题,我已经制定了一个jsFiddle示例:http://jsfiddle.net/XAXKZ/5

你犯了一些错误:

  • isActive和isActive混淆了。JavaScript仍然是区分大小写的。你需要把它显示为一个函数:

data-bind="visible: !IsActive()"

  • 你也可以用这种方式测试其他变量,而不需要为它添加专门的函数:

data-bind="visible:productOverview.Image() == '' || productOverview.Image() == null"

你应该这样调用这个可观察对象:

<img src="../../images/notactive_icon.gif" data-bind="visible: productOverview.isActive() " />

因为isActive是一个函数所以它永远不会为null