Knockout.js如果条件在每个循环
问题描述:
我有一个视图与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 -->
之一在类型的选项是发电机但第四按钮仍显示即使对于该行。我错过了什么吗?
答
淘汰赛需要一个()类型后才能正常工作。
<!-- ko if: type() !== "Generator" -->
<button type="button" class="btn btn-inverse" >On Generator</button>
<!-- /ko -->
答
好,你自己发现了错误。
有一个简单的技巧来识别这些类型的错误, 特别是在视图中执行绑定时。
浏览器控制台登录:
<!-- 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
,这将记录在浏览器控制台窗口范围的当前数据。
这真的有助于了解,视图和数据绑定是什么。
我希望这会帮助你!