Knockout.js如果條件在每個循環

Question

我有一個視圖與Knockout Js有一個循環。我需要爲其中一個添加if條件。我跟着this answer但這似乎並不奏效。

我的代碼：

<!-- ko foreach: systems --> 
<div class="form-group system-status-row border-left border-green"> 
    <div class="col-sm-2 control-label"> 
     <label data-bind="text: type"></label> 
    </div> 
    <div class="col-sm-7"> 
     <div class="btn-group btn-group-sm status-btns four-btns"> 
      <button type="button" class="btn btn-success">Operational</button> 
      <button type="button" class="btn btn-warning">Partial</button> 
      <button type="button" class="btn btn-danger">Non Operational</button> 
      <!-- ko if: type !== "Generator" --> 
      <button type="button" class="btn btn-inverse">On Generator</button> 
      <!-- /ko --> 
     </div> 
    </div> 
</div> 
<!-- /ko --> 

之一在類型的選項是發電機但第四按鈕仍顯示即使對於該行。我錯過了什麼嗎？

Answer 1

淘汰賽需要一個（）類型後才能正常工作。

<!-- ko if: type() !== "Generator" --> 
     <button type="button" class="btn btn-inverse" >On Generator</button> 
<!-- /ko --> 

Answer 2

好，你自己發現了錯誤。

有一個簡單的技巧來識別這些類型的錯誤， 特別是在視圖中執行綁定時。

瀏覽器控制檯登錄：

<!-- ko foreach: systems --> 
<div class="form-group"> 
      <!-- ko if: type !== "Generator" --> 

       //Logs the Current scope data in browser console: 
       //And property data too: 
       <button data-bind="click: function() { console.log($data); console.log(type); }"> Current Data Log </button> 

       //You Button Code 
       <button type="button" class="btn btn-inverse">On Generator</button> 
      <!-- /ko --> 
     </div> 
    </div> 
</div> 
<!-- /ko --> 

在瀏覽器中Current Data Log按鈕即可Click，這將記錄在瀏覽器控制檯窗口範圍的當前數據。

這真的有助於瞭解，視圖和數據綁定是什麼。

我希望這會幫助你！