淘汰赛样式绑定未更新

Posted 2023-03-27

【中文标题】淘汰赛样式绑定未更新

【英文标题】：knockout style binding is not updating

【发布时间】：2014-01-08 11:11:57

【问题描述】：

我有以下标记：

<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 复选框时，文本的颜色不会改变。当我输入以下内容时，在控制台中：

mappedModel.ReportsByPriority()[0].ReportReplies()[0].ViolationCorrected()

它显示每个复选框的正确和更新的值，但文本的颜色没有改变。如果在控制台中显示一个更新的值，它肯定是一个工作的 observable 并捕获更改的值，那么为什么样式绑定颜色不检查 span 的变化以反映这一点？

【参考方案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。