检查数据绑定不适用于淘汰赛 js 中的单选按钮

Question

<div id="distance-filter" data-bind="foreach: model.distance">
<p ><input type="radio" value="value" name="distance" data-bind="checked: model.check"> <span data-bind="text:model.check"></span></p>
</div>

检查的数据绑定不起作用我的模型如下

var model= {    
    filter_list: ko.observableArray([{filter:'restaurant'},{filter:'hospital'},{filter:'atm'},{filter:'cafe'}]),
    fav_list: ko.observableArray([{fav:'Pizzahut'},{fav:'Dominos'},{fav:'Barista'}]),
     distance: ko.observableArray([{value: 500},{value: 1000},{value: 5000},{value: 10000}]),
     check: ko.observable(1000)

};

Answer 1

问题是您没有设置每个项目的正确值。 相反，它们都具有值"value" 。

取出

value="value"

并将您的数据绑定更改为

data-bind="checked: model.check, checkedValue: value"

Answer 2

这可能不是您最终想要做的，但它至少可以让支票做一些有趣的事情。

尽管您可以引用model因为它是一个全局变量，但您不应该引用它。 （它不应该是全局变量。）代替model.distance ，只需在foreach绑定中使用distance 。 在 foreach 中，上下文会发生变化。 要引用已checked （未在每个distance对象中定义），您需要使用$parent.checked 。 您可以直接使用value ，因为上下文是当前distance对象。

您可能想要做的是让每个按钮都标有自己的value ，然后在 foreach 之外打印checked的值以指示其当前值。 正如所写的， checked的值打印在每个按钮旁边，当您更改选择哪个按钮时，它们都会更改。

另外： checked的值应该是一个字符串，因为input项的值是字符串。

 var model = { distance: ko.observableArray([{ value: 500 }, { value: 1000 }, { value: 5000 }, { value: 10000 }]), check: ko.observable('1000') }; ko.applyBindings(model);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div id="distance-filter" data-bind="foreach: distance"> <p> <input type="radio" name="distance" data-bind="attr: { value: value }, checked: $parent.check"> <span data-bind="text:$parent.check"></span> </p> </div>