Knockoutjs：在emty或null時隱藏圖像

我想在網頁中首次實現knockoutjs。我偶然發現了以下問題，但也許這也是「最佳實踐」的例子。Knockoutjs：在emty或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 != ''" />

有沒有更簡單的方法，而不是使計算observables？

我也想顯示活動圖像時，該產品是活躍：

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

但這種形象沒有顯示，爲什麼？

而另一種方式，我也可以顯示像這樣的非活動圖像？

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

來源

2013-04-04 JurgenStillaert

我關於你的問題，制定出了的jsfiddle例如：http://jsfiddle.net/XAXKZ/5

您犯了一些錯誤：

isActive和IsActive混淆起來。 JavaScript仍然區分大小寫。而你需要它顯示爲一個功能：

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

您還可以測試其他變量這種方式，無需添加專用功能吧：

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

來源

2013-04-05 08:03:32

你應該叫可觀察到的是這樣的：

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

這是因爲isActive是一個功能，所以它永遠不會空

來源

2013-04-04 14:56:03 Damien

我已經試過，但是當頁面加載時，我收到以下錯誤：'錯誤：無法解析綁定。消息：TypeError：productOverview.isActive不是函數; 綁定值：visible：productOverview.isActive（）' – JurgenStillaert 2013-04-04 15:00:41

Knockoutjs：在emty或null時隱藏圖像

回答

相關問題