2017-05-05 3 views
2

私にはループがあるKnockout Jsのビューがあります。私はそれらのいずれかのif条件を追加する必要があります。私はthis answerに従ったが、それは動作していないようだ。Knockout.js各ループの条件である場合

マイコード:タイプのオプションの

<!-- 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 --> 

一つが発電機であるが、4番目のボタンは依然としてもその行のために示されています。何か不足していますか?

答えて

2

ノックアウトは、動作させるにはタイプ後にa()が必要です。

<!-- ko if: type() !== "Generator" --> 
     <button type="button" class="btn btn-inverse" >On Generator</button> 
<!-- /ko --> 
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 --> 

だけClickブラウザでCurrent Data Logボタンに、これはブラウザのコンソールウィンドウにスコープの現在のデータを記録します。

ビューとデータバインディングについて知ることは本当に役に立ちます。

私はこれがあなたを助けてくれることを願っています!

関連する問題