{"action":"opened","issue":{"url":"https://api.github.com/repos/faulknercs/Knockstrap/issues/37","labels_url":"https://api.github.com/repos/faulknercs/Knockstrap/issues/37/labels{/name}","comments_url":"https://api.github.com/repos/faulknercs/Knockstrap/issues/37/comments","events_url":"https://api.github.com/repos/faulknercs/Knockstrap/issues/37/events","html_url":"https://github.com/faulknercs/Knockstrap/issues/37","id":121024021,"number":37,"title":"radio click event sends old value","user":{"login":"fieder","id":1662253,"avatar_url":"https://avatars.githubusercontent.com/u/1662253?v=3","gravatar_id":"","url":"https://api.github.com/users/fieder","html_url":"https://github.com/fieder","followers_url":"https://api.github.com/users/fieder/followers","following_url":"https://api.github.com/users/fieder/following{/other_user}","gists_url":"https://api.github.com/users/fieder/gists{/gist_id}","starred_url":"https://api.github.com/users/fieder/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fieder/subscriptions","organizations_url":"https://api.github.com/users/fieder/orgs","repos_url":"https://api.github.com/users/fieder/repos","events_url":"https://api.github.com/users/fieder/events{/privacy}","received_events_url":"https://api.github.com/users/fieder/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-12-08T14:56:16Z","updated_at":"2015-12-08T14:56:16Z","closed_at":null,"body":"Hi there,\r\n\r\nThis is related to issue #34.\r\n\r\nWe've changed the data-bind so it only allows one option to be chosen. We use radio instead of checkbox.\r\n\r\nWe want to filter the result set based on the chosen category. From the UI, we need to query our backend every time user selects a new option. To do that, we use multiple data-bind. This is our widget definition\r\n\r\n     self.topCategoriesList = ko.observableArray(['Rock', 'Blues', 'Heavy']);\r\n     self.chosenCategory = ko.observable();\r\n    \r\n    <div data-toggle=\"buttons\"\r\n     data-bind=\"radio: eventListPage().chosenCategory, \r\n                       foreach: { data: eventListPage().topCategoriesList}, \r\n                       click: havefun.loadEvents()\">\r\n                       <label class=\"btn btn-transparent\">\r\n                           <input type=\"radio\" data-bind=\"value: $data\"/>\r\n                           <span data-bind=\"text: $data\"></span>\r\n                       </label>\r\n    </div>\r\n\r\nwhereas loadEvents() is the JS method that builds request to hit backend based on the chosen category. \r\n\r\nThe problem seems that the event 'click' is triggered before 'value' and as a result, when I build the request using the chosenCategory I get the previous value. \r\n\r\nHere's an example. Function t represents the time as we move forward\r\n\r\nt(0) = topCategories[Rock, Blues, Heavy]\r\nt(1) = user clicks 'Rock' ; loadEvents gets 'undefined when accessing 'eventListPage().chosenCategory'\r\nt(2) = user clicks 'Heavy' ; loadEvents gets 'Rock' when accessing  'eventListPage().chosenCategory'\r\nt(3) = user clicks 'Blues' ; loadEvents gets 'Heavy' when accessing  'eventListPage().chosenCategory' \r\nand so on. \r\n\r\nThe value is always t(n -1) where n = current.\r\n\r\nAny idea how to do it? The workaround is to remove the click data-bind and add a separated button to refresh the content. If we do that it works fine but user experience is not great as we need to click on the refresh button every time."}}