使用checkedValue綁定單選按鈕

我試圖使用knockout版本3中引入的checkedValue綁定與單選按鈕，但沒有得到我期望的行爲。使用checkedValue綁定單選按鈕

下面是一個例子：（視圖模型具有兩個屬性; list是一個數組; checkedVal是可觀察到的）

<div data-bind="foreach:list"> 
    <input type="radio" data-bind=" 
     checkedValue: { 
      data: $data, 
      index: $index(), 
     }, 
     checked: $parent.checkedVal 
    "/> 
    <span data-bind="text: $data"></span> 
</div>

JSFiddle

我期望單選按鈕正常行爲，並且checkedVal是一個包含數據和索引的對象。 checkedVal是我所期望的，但單選按鈕不會選擇。奇怪的是，在我的實際代碼中，行爲是不一致的;有時候無線電臺的按鈕有時會奏效，有時卻不會奏效，但就我所見，它始終無法在小提琴中奏效。

這是一個錯誤，還是我誤解這應該如何工作？

來源

2013-12-16 Retsam

看來，這個問題已在KO的新版本已經解決了。從版本3.2開始，我不再看到我的原始問題中提到的這種行爲。

這是一個working JSFiddle，與原始相同，除了KO更新到3.2。

來源

2015-04-17 22:22:04 Retsam

你checkedValue結合成爲一個功能如下：

function() { 
    return { 
     data: $data, 
     index: $index(), 
    }; 
}

每次checked綁定更新，它會調用這個函數來獲取價值。但該函數總是返回一個新的對象。即使對象包含相同的數據，Knockout也不會將它們視爲相同。

您可以通過將該值設置爲字符串來解決此問題。

<input type="radio" data-bind=" 
     checkedValue: JSON.stringify({ 
      data: $data, 
      index: $index(), 
     }), 
     checked: $parent.checkedVal 
    "/>

或者通過綁定到一致的值。

<input type="radio" data-bind=" 
     checkedValue: $data, 
     checked: $parent.checkedVal 
    "/>

編輯：

您可以使用遵循相同的模式爲checked，但允許比較功能的自定義綁定。

ko.bindingHandlers.radioChecked = { 
    init: function (element, valueAccessor, allBindings) { 
     ko.utils.registerEventHandler(element, "click", function() { 
      if (element.checked) { 
       var observable = valueAccessor(), 
        checkedValue = allBindings.get('checkedValue'); 
       observable(checkedValue); 
      } 
     }); 
    }, 
    update: function (element, valueAccessor, allBindings) { 
     var modelValue = valueAccessor()(), 
      checkedValue = allBindings.get('checkedValue'), 
      comparer = allBindings.get('checkedComparer'); 
     element.checked = comparer(modelValue, checkedValue); 
    } 
};

然後可以通過內容比較對象。

this.itemCompare = function(a, b) { 
    return JSON.stringify(a) == JSON.stringify(b); 
}

的jsfiddle：http://jsfiddle.net/mbest/Q4LSQ/

來源

2013-12-17 01:37:05

如果這是真的，那麼我沒有看到checkedValue的點;第一個例子肯定會用'價值'來工作，我認爲第二個例子也是如此。 – Retsam

您可能對我添加的可以使用的自定義綁定感興趣，而不是'checked'並支持比較功能。 –

使用checkedValue綁定單選按鈕

回答

相關問題