如果未顯示'ko with'，則顯示不同的內容

我正在使用以下敲除代碼來顯示對象的屬性。使用with我可以檢查該對象中的屬性是否存在。如果未顯示'ko with'，則顯示不同的內容

<!-- ko with: Bunk1 --> 
<div data-bind="css: Color"> 
    <div class="row no-margin"> 
     <div> 
      <div data-bind="text: Name"></div> 
      <div data-bind="text: FirstName"></div> 
     </div> 
    </div> 
</div> 
<!-- /ko -->

這是模型：

var viewModel = function() { 
    var self = this; 
    self.Bunk1 = ko.observable(); 
    self.Bunk2 = ko.observable(); 
    ... 

    ... 

    // 'val' is loaded with $.ajax 
    // this code might not be executed and Bunk1 can fail to initialize. 
    var model = new BunkModel(); 
     model.initModel(val); 
     self.Bunk1(model); 

    ... 
} 

function BunkModel() { 
    var self = this; 
    self.Color = ko.observable(); 
    self.Name= ko.observable(); 
    self.FirstName= ko.observable(); 

    self.initModel = function (values) { 
     self.Color(self.mapColor(values.color)); 
     self.Name(values.name); 
     self.FirstName(values.firstName); 
    } 
}

什麼，我想這樣做是爲了顯示替代div如果沒有數據，像一個else到ko with。如何綁定對象屬性，但如果不存在則顯示替代數據。

來源

2016-09-22 Thomas Schneiter

怎麼樣一個簡單的'KO如果：Bunk1（）=== undefined'或'KO，如果：Bunk1（）=== null'後' ko與'塊？ – Stijn

不知道'undefined'。 '如果Bunk1（）=== undefined'似乎工作。 'null'不起作用，因爲它似乎是在'self.Bunk1 = ko.observable（）;' –

之後初始化的，我會將其轉換爲答案。首先提出，因爲它似乎相當明顯，但也許不是一個淘汰賽初學者:) – Stijn

在不傳遞值的情況下創建新的observable時，其值將爲undefined。這意味着你可以簡單地將現有with塊下方的條件塊：

<!-- ko if: Bunk1() === undefined --> 
content here 
<!-- /ko -->

請注意，您需要使用做這樣的比較時，括號，Bunk1 === undefined如果觀察到的本身是不確定的，而不是它的潛在價值將檢查。

來源

2016-09-22 09:52:54 Stijn

除了@Stijn的回答。

您可以使用「ifnot」結合：

<!-- ko ifnot: Bunk1 --> 
content here 
<!-- /ko -->

來源

2016-09-22 09:55:41 TSV

這也會工作，的確，因爲'undefined'是[falsey]（http://stackoverflow.com/questions/19839952/all-falsey - 值-在JavaScript的）。 – Stijn

如果未顯示'ko with'，則顯示不同的內容

回答

相關問題