knockout.js - 淘汰赛模板绑定丢失状态

Question

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

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

http://jsfiddle.net/d3YJc/1/

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

Answer 1

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

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

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

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