Odd Behavior of Checked Binding with Back Button

15 views
Skip to first unread message

bria...@noaa.gov

unread,
Jun 23, 2015, 8:50:29 AM6/23/15
to knock...@googlegroups.com
The following code uses an observable array and a check binding with a radio input. Everything works fine until navigating away from the page then using the back button. I would expect the radio to revert to the default slectedThing which is 'THING1', but instead things vary by browser with some very unexpected results.

In Firefox selectedThing is whatever was last selected. It seems Firefox does not reload the script instead reloading the page state completely. This is unexpected, but reasonable.

In Chrome selectedThing is 'THING1', but the radio button is not checked if selectedThing was 'THING1' when navigating away from the page. This is unexpected and seems like a bug.

In IE selectedThing is 'THING1', but both radio buttons are check if selectedThing was 'THING2' when navigation away from the page. This is unexpected and seems like a bug.

I understand that the back button fires different events in different browsers, but does anyone know why the radio buttons are being rendered improperly?

<!doctype html>

<html>
<body>

<div data-bind="foreach: availableThings">
<input type="radio" name="things" data-bind="attr: { 'id':id }, checked:$root.selectedThing, checkedValue:$data.id">
<label data-bind="attr: { 'for':id }, text: name"></label>
</div>

<div data-bind="text:selectedThing">
</div>

<a href="http://www.google.com">Link</a>

<script >
var TestModel = (function() {
var testModel = {};
testModel.ViewModel = function() {
var self = this;
self.availableThings = ko.observableArray([ { id:'THING1', name:'Thing1' }, { id:'THING2', name:'Thing2' } ]);
self.selectedThing = ko.observable('THING1');
}
return testModel;
})()

ko.applyBindings(new TestModel.ViewModel());
</script>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages