JsViews: On 'change' with Select not working as expected

1
votes

<select class="updateValueJQ" data-link="{:value:} {on 'change' ~updateValue value}"> Not working as expected, returns the previous value, not the updated/changed value.

When using jquery to get the same changed value, it does return the updated/changed value. I was expecting the same from jsviews.

The data-link {:value:} does update both ways of course...but ultimately I need to grab the the 'text' value from the selected option to update elsewhere using setProperty(). Note: options are wrapped in a {{for...}}

Can see issue here: https://jsfiddle.net/alnico/h50jyd7o/

UPDATE:

I thought on 'click'/default event worked as expected...I was wrong. It fires on both the select AND the option when each is clicked. I suppose that is the 'expected' behavior for click. However...

When passed to a helper, the select button returns the current value...then when option is clicked the changed value is returned. This is not good as the function would have to ignore the first click on select.

So, to add to my original post above...change fires 1 time, once an option is selected as expected, but...

Jquery returns the changed to value while Jsviews returns the current/previous value.

It seems to me that jsviews is not handling 'change' correctly for a select element?

2
jsrenderjsviews

2 Answers

0
votes

Event - change is working correctly. First, updated DOM next update observable object. Event change happens at the moment the DOM changes (before update observable object) therefore the object is immutable.

Take away value from {on 'change' ~updateValue } then the dom event itself will disappear into the function.

You can turn to the conclusion like this:

$(e.currentTarget).val()

Your handler will look like this:

        $.views.helpers({
            updateValue: function(e) {
                console.log('jsv = ' + $(e.currentTarget).val());
            }
        })

jsfiddle example

0
votes

Yes, Codd is correct. The value parameter you are passing is the data value, which has not yet been updated, during the change event. You can still pass it if you want, but it is the previous value: 

updateValue: function(previousValue, ev) {
    console.log('jsv = ' + ev.target.value);
}

Alternatively, don't use an onChange handler, but instead use a converter:

<select data-link="value convertBack=~updateValue">

updateValue: function(value) {
    console.log('jsv = ' + value);
    return value;
}

You can also/alternatively observe the data change directly, of course, and get previous and new values, and also the select element value:

$.observe(data, "value", function(ev, eventArgs) {
    console.log('obs = ' + eventArgs.oldValue + "->" + eventArgs.value + " target " + ev.target.value);
});