radio click event sends old value

[fieder]

Hi there,

This is related to issue #34.

We've changed the data-bind so it only allows one option to be chosen. We use radio instead of checkbox.

We 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

 self.topCategoriesList = ko.observableArray(['Rock', 'Blues', 'Heavy']);
 self.chosenCategory = ko.observable();

<div data-toggle="buttons"
 data-bind="radio: eventListPage().chosenCategory, 
                   foreach: { data: eventListPage().topCategoriesList}, 
                   click: havefun.loadEvents()">
                   <label class="btn btn-transparent">
                       <input type="radio" data-bind="value: $data"/>
                       <span data-bind="text: $data"></span>
                   </label>
</div>

whereas loadEvents() is the JS method that builds request to hit backend based on the chosen category.

The 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.

Here's an example. Function t represents the time as we move forward

t(0) = topCategories[Rock, Blues, Heavy] t(1) = user clicks 'Rock' ; loadEvents gets 'undefined when accessing 'eventListPage().chosenCategory' t(2) = user clicks 'Heavy' ; loadEvents gets 'Rock' when accessing 'eventListPage().chosenCategory' t(3) = user clicks 'Blues' ; loadEvents gets 'Heavy' when accessing 'eventListPage().chosenCategory' and so on.

The value is always t(n -1) where n = current.

Any 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.

[petemill]

Instead of having a click handler, in your JS you could subscribe to chosenCategory changes and send the data to your server then.

self.chosenCategory.subscribe(function(newCategory){ //stuff });

On Tue, Dec 8, 2015 at 6:56 AM fieder notifications@github.com wrote:

Hi there,

This is related to issue #34 https://github.com/faulknercs/Knockstrap/issues/34.

We've changed the data-bind so it only allows one option to be chosen. We use radio instead of checkbox.

We 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

self.topCategoriesList = ko.observableArray(['Rock', 'Blues', 'Heavy']); self.chosenCategory = ko.observable();

<div data-toggle="buttons" data-bind="radio: eventListPage().chosenCategory, foreach: { data: eventListPage().topCategoriesList}, click: havefun.loadEvents()">

[fieder]

Cheers Pete for the suggestion. It worked like a charm. Thank you!

[faulknercs]

Oh, question is already answered :) Could I close the issue?

[fieder]

Yes, go ahead and close it. Thank you :)

On Wed, Dec 9, 2015 at 8:49 AM, Artem Stepanyuk notifications@github.com wrote:

Oh, question is already answered :) Could I close the issue?

— Reply to this email directly or view it on GitHub https://github.com/faulknercs/Knockstrap/issues/37#issuecomment-163152787 .

Felipe IEDER CEO, Co-founder

http://druidalabs.com +44 2078 132 468 UK Registered Company No. 07023467 70 B Saltoun Rd, SW2 1ER, London.