檢查數據綁定不適用於淘汰賽 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>