Question

我有以下标记：

<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()

显示每个复选框的正确和更新值，但文本的颜色不会更改。如果在控制台中它显示更新的值，它肯定是一个工作的可观察并捕获更改的值，那么为什么不更改样式绑定颜色检查跨度更改以反映？

Answer 1

您需要获取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。

淘汰赛样式绑定没有更新

1 个答案: