Knockoutjs:当图像为空或为空时隐藏图像
Knockoutjs: hide image when emty or null
我试图在网页上第一次实现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
相关文章:
- mouseOver上的隐藏图像问题
- 如何在运行时使用javascript隐藏图像
- 在鼠标悬停处隐藏图像
- 图像未正确隐藏
- 显示生成的gif;base64图像使用C#代码隐藏在img中使用JavaScript
- 如果没有历史记录,我如何隐藏图像或按钮onclick=;历史.go(-1);
- js:如何隐藏/加密图像的src
- ImageMapster可以动态显示和隐藏图像选择崩溃
- 谷歌地图加载后隐藏加载图像
- 有没有一种方法可以为卸载的lazylod图像隐藏alt标签
- CSS Html使图像显示在单选按钮的选项上(单选按钮被CSS隐藏)
- 加载直到图像准备好,而图像隐藏直到它准备好
- 当背景图像隐藏时,表格中没有边框
- 图像隐藏和显示在文本上悬停在一个页面上使用多个图像/链接
- 将图像隐藏后显示
- 我如何使一个图像隐藏在点击并播放隐藏在它下面的视频
- 我如何使图像隐藏在鼠标显示
- 如何通过点击图像显示/隐藏文本将其转为图像“隐藏”
- 加载图像隐藏可见效果使用javascript和CSS
- “图像隐藏于”复选框