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，这将记录在浏览器控制台窗口范围的当前数据。

这真的有助于了解，视图和数据绑定是什么。

我希望这会帮助你！