samedi 30 juillet 2016

KnockoutJS - Correct Way of Writing KO BindingHandlers for Input Type Radio

I have set a custom binding for input type radio, which is like this:

"radio-yesno": function(bindingContext, dataClasses){
    return {
        click: this,
    }
},

The Html Input Type Radio binds to this is written like this:

<label class="radio inline">
   <input type="radio" name="RadioTest" id="RadioYes" data-class="radio-yesno"/>
   Yes
</label>
<label class="radio inline">
   <input type="radio" name="RadioTest" id="RadioNo" data-class="radio-yesno"/>
   No
</label>

(You may notice that I am using data-class here to bind the element, it is because I am using the ClassBindingProvider plugin)

The problem now is when the radio button is clicked, the function which contains the associated observable of this element is actually triggered and during debugging it can be seen that the value of

$('#RadioNo').is(':checked')

is actually true when the No Radio Button is clicked and is false when the Yes Radio Button is clicked.

Currently the ko BindingHandlers that I am using here is "click" only.

I have tried to add more bindingHandler which is "checked: this" and put it below the "click: this" line, but still doesn't work.

Could someone please help me to identify what is the problem here and how should it be fixed?

Thanks.




Aucun commentaire:

Enregistrer un commentaire