淘汰赛模板绑定丢失状态答案

【问题标题】：Knockout template binding loseing state淘汰赛模板绑定丢失状态
【发布时间】：2013-07-24 19:17:47
【问题描述】：

我正在使用模板绑定来呈现一组单选按钮。元素上还有一个 css 绑定。

单击单选按钮时，视图模型和视图会更新，但单选按钮的选中状态会丢失。有解决办法吗？

<div data-bind="with: point">
    <div data-bind="template: { name: 'template1', data: $data }, css: { 'has-warning': hasAlarm }"></div>
</div>

<script type="text/template" id="template1">
    <!-- ko foreach: choices -->
    <label>
        <input type="radio" data-bind="checked: $parent.value, value: $data" name="test" />
        <span data-bind="text: $data"></span>        
    </label><br/>
    <!-- /ko -->    
    <span data-bind="visible: hasAlarm">Abnormal!</span>
</script>

【问题讨论】：

奇怪的是，如果您使用模板的 foreach 选项，它可以工作：jsfiddle.net/FTnCd 顺便说一下，如果您在标签上单击两次，它也可以在您的示例中工作。
如果您使用的是 checkbox-es，它也不起作用：jsfiddle.net/RjH3E。在这一点上，我会说你发现了一个错误，但它似乎已在 3.0 版中修复：jsfiddle.net/Ne48f 所以你应该升级到 3.0 测试版，或者使用我之前评论中的解决方法。
我认为这可能与所有绑定每次都重新评估这一事实有关。如果是这样，也许 Knockout v3.0 会修复它。
@nemesv 您应该将其添加为答案。这绝对是一个错误。
@nemesv 它适用于foreach，因为如果数据相同，它不会重新渲染，但对于data，它会重新渲染。但是，根本原因是元素的所有绑定都一起更新（在 3.0 之前）。

标签： knockout.js knockout-templating

【解决方案1】：

问题在于checked 和value 绑定的顺序。 checked 绑定使用元素的值来确定是否应该检查它。首次绑定元素时，在初始化checked 绑定后，该值由value 绑定设置。所以最简单的解决方法是重新排序绑定。另外我建议您使用attr 绑定而不是value，因为value 有额外的开销（它是为文本框设计的双向绑定）。

data-bind="attr: {value: $data}, checked: $parent.value"

http://jsfiddle.net/mbest/d3YJc/2/

Knockout 3.0 还修复了顺序问题（除了 cmets 中提到的渲染问题），因此这是解决此问题的另一种方法。

【讨论】：