Knockout custom binding handler for Polymer core-selector - setting 'selected' attribute is not updating the element

Question

The binding handler and the HMTL.

ko.bindingHandlers.radioGroupChanged = {
    init: function (element, valueAccessor, allBindingAccessor, viewModel, bindingContext) {
        var value = valueAccessor();
        var newValueAccessor = function () {
            return {
                change: function () {
                    var selectedValue = $(element).attr('selected');
                    value(selectedValue);
                }
            }
        };

        ko.bindingHandlers.event.init(element, newValueAccessor, allBindingAccessor, viewModel, bindingContext);
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        $(element).attr('selected', valueAccessor()());
    }
}

<paper-radio-group style="position:absolute; left:160px; top:0px;" data-bind="radioGroupChanged: MessagePriority" }">
    <paper-radio-button label="High">
    </paper-radio-button>
    <paper-radio-button label="Medium">
    </paper-radio-button>
    <paper-radio-button label="Low">
    </paper-radio-button>
</paper-radio-group>

When it hits the update function, if I manually update the selected attribute of the radio group element it changes to "select" straight away.

$(element).attr('selected', '0');

then $(element).attr('selected') is always 'selected'.

I have no idea why it's not retaining the value.

Answer 1

The selected attribute is not meant to be a indicator which element is selected and only describes the initial state. The actual selected property on the DOM element is holding this information. So in your case you would do the following:

element.selected = valueAccessor();

or to read:

if(element.selected == 1) alert("Yeah Medium was selected");

Hope that helps.