JsViews - Binding 'change' event to <select> fails

Question

I have this drop down:

                <select id="selectCard" class="form-control" data-link="SelectedCardType">
                    <option value="-">- Select -</option>
                    {^{for CardTypes}}
                    <option data-link="value{:Item1} {:Item2} selected{:Item1 == ~root.SelectedCardType}"></option>
                    {{/for}}
                </select>

And do this:

                $.templates("#spTmp").link("#SelectionPanel", viewModel)
                    .on('change', "#selectCard", function () {
                        UpdateGrid();
                    });

However, when I get into function UpdateGrid() the value of SelectedCardType is the old one (it's not updated yet). What am I supposed to do differently?

Answer 1

Ha! Got it! This seems to be a JQuery problem. I observe the viewModel instead...:

$.observe(viewModel, "SelectedCardType", UpdateGrid);