淘汰赛样式绑定没有更新

时间:2013-12-19 18:39:52

标签: knockout.js knockout-mapping-plugin

我有以下标记:

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

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

1 个答案:

答案 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