Knockout.js:Emty或null时隐藏图像 [英] Knockoutjs: hide image when emty or null

问题描述

我正在尝试在网页中首次实现淘汰赛.我偶然发现了以下问题，但也许也是最佳做法"的情况.

I'm trying to implement knockoutjs for the first time in a web page. I stumbled into the following problem, but maybe it is also a case of "best practices".

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

I have a product page, and a product can have a product image. When there is no product image available, the property is set to null and I need to show a "no image available" picture.

我的模特:

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>

它可以工作，但是像这样不起作用:

It works, but like this it is not working:

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

有没有更短的方法，而不是使计算得到的可观测值?

我还想在产品处于活动状态时显示活动图像:

I also wanted to show an active image when the product is active:

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

但是此图片没有显示，为什么?

反过来说，我也可以显示不活动的图像吗?

And the other way around, can I also show the inactive image like this?

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

推荐答案

我针对您的问题设计了一个jsFiddle示例:

I've worked out a jsFiddle example regarding your questions: http://jsfiddle.net/XAXKZ/5

您犯了一些错误:

• isActive和IsActive混杂在一起. JavaScript仍然区分大小写.您需要将其显示为功能:

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

• 您还可以通过这种方式测试其他变量，而无需为其添加专用功能:

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

这篇关于Knockout.js:Emty或null时隐藏图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！