我有以下标记:
<div data-bind="foreach: ReportsByPriority">
<h2><span data-bind="text: Priority.Name"></span> Priority <span class="more-info"></span><span class="info small" data-bind="text: Priority.Description"></span></h2>
<ol data-bind="foreach: ReportReplies" >
<li><span data-bind="text: Name"></span<br/><br/>
<input type="checkbox" name="ViolationCorrected" id="ViolationCorrected" data-bind="checked: ViolationCorrected"/>
<span data-bind="style: { color: (ViolationCorrected == true ? '#3c801b' : 'red')}">Violation Corrected</span><br/><br/>
</li>
</ol>
</div>
我使用mapping util将我的服务器模型转换为淘汰模型。当页面加载时,一切看起来都是正确的,但是当我尝试选中或取消选中ViolationCorrected
复选框时,文本的颜色不会改变。在我输入的时候在控制台中:
mappedModel.ReportsByPriority()[0].ReportReplies()[0].ViolationCorrected()
显示每个复选框的正确和更新值,但文本的颜色不会更改。如果在控制台中它显示更新的值,它肯定是一个工作的可观察并捕获更改的值,那么为什么不更改样式绑定颜色检查跨度更改以反映?
答案 0 :(得分:3)
您需要获取observable的值,因为您正在执行条件逻辑 -
<div data-bind="foreach: ReportsByPriority">
<h2><span data-bind="text: Priority.Name"></span> Priority <span class="more-info"></span><span class="info small" data-bind="text: Priority.Description"></span></h2>
<ol data-bind="foreach: ReportReplies" >
<li><span data-bind="text: Name"></span><br/><br/>
<input type="checkbox" name="ViolationCorrected" id="ViolationCorrected" data-bind="checked: ViolationCorrected"/>
<span data-bind="style: { color: (ViolationCorrected() === true ? '#3c801b' : 'red')}">Violation Corrected</span><br/><br/>
</li>
</ol>
</div>
它在加载时起作用的原因是ViolationCorrected
是一个函数,因此不等于false
,任何不等于false
的都等于true
。