Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Underlying data updated only at loseFocus #38

athalay opened this Issue Feb 16, 2012 · 5 comments


None yet
2 participants

athalay commented Feb 16, 2012

Dear All,

I have the following template:

<script id="rrTemplate" type="text/x-jquery-tmpl">
        <span>Number of full rounds:</span>
        <input data-getfrom="[NumOfFullRounds]" data-to="[NumOfFullRounds]" class="numericValue"/>
        Reps in partial round:

    {{#each RepetitionItems}}
            <span><input id="txtRep{{=Id}}" data-getfrom="[Value]" data-to="[Value]" class="numericValue XXX"/></span>          
            <span data-getfrom="[Value]"></span>

The problem is, that in the each-block, if the user types anything into the input-field (textbox), the span next to it (which is bound to the same property) is updated only when the textbox loses focus. How to make it possible to updated on-the-fly?



BorisMoore commented Feb 16, 2012

There is no way yet to specify the trigger event declaratively, but you can handle the key events yourself and call observable set property from your handler. See http://borismoore.github.com/jsviews/demos/step-by-step/11_todos-closure.html which does something similar. (Code at https://github.com/BorisMoore/jsviews/blob/master/demos/step-by-step/11_todos-closure.html#L116).

athalay commented Oct 1, 2012

Dear Boris,

Sorry to bother you with this old problem again, I haven't checked all changelogs, but for the OP problem, is my code below still the only solution?

My data (vm) is bound to an input[type=text] element in my 'simpleNumberInputTemplate'.

$.link.simpleNumberInputTemplate(vm, "#whereToRender").on('keyup', 'input', function(e) {
    }).on('change', 'input', function(e) {

function UpdateVM(e)
var actVM = $.view(e.target).data;
var actVal = $(e.target).val();
$.observable(actVM).setProperty('Value', actVal);
//#1: validate actVal and change it to proper value if validation failed
//#1: $.view(e.target).refresh();
//#1: e.target.focus();

So to on-the-fly update the viewmodel: basically on 'keyup' and 'change' events, manually get the value of the input-element and manually calling observable.setProperty? If this is the way to go do I need to consider some other event?

And if I want to do some validations (that someone should only type numbers into the input field), then is my #1-snippets the way to go? Basically validating and correcting the current value, and calling refresh()? Refresh rerenders the whole template (wouldn't be a big problem), but refocus would be nice, but it doesn't work :(

Or do you advise something different for this?

athalay commented Oct 5, 2012

Just a slight update: calling observable(...).setProperty() in the UpdateVM (event handler for 'keyup') does not update the underlying model, and whatever is bound to "Value" in the template is not updated!!!!!

In my test environment doing this:

<span data-link="Value"></span>

And this span is not updated at all!

Any solution for this problem?


BorisMoore commented Apr 9, 2013

@athalay: Sorry I didn't manage to get back to you on this.

I have created feature request bug for triggers: #162.

Closing this issue, since much has changed since your issue above. If it is still an issue with current code can you open a new issue, if possible with a jsfiddle test case... Thanks!

@BorisMoore BorisMoore closed this Apr 9, 2013


BorisMoore commented Jul 30, 2014

This feature exists since commit 55.

<input data-link="name trigger=true" /> will trigger on keyup.`

You can also specify events e.g. (not a realistic choice): <input data-link="name trigger='keyup mousedown'" /> will trigger on keyup and mousedown.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment