forms - Meteor binding values for inputs with event generation -

i have form input value bound reactive data source:

<input type="text" name="first-name" id="first-name" required value="{{currentuser.profile.firstname}}" /> 

i want watch 'change' events on input:

$('#first-name').change(function() { alert('value changed!'); }); 

this works fine if change value directly in input. however, if value changes reactively, change event doesn't fire.

what's best way bind values form elements 'change' event fires if reactive data source changes?

the optimum solution use manuel:viewmodel. keep state of ui in javascript object , bind ui elements properties of object.

example :

first add package project meteor add manuel:viewmodel

then in html following :

<template name="loginbox">   first name: <input type="text" data-bind="value: first"/>   <br/>   last name: <input type="text" data-bind="value: last"/>   <div data-bind="text: greeting"></div>   <a data-bind="enabled: canenter, hover: showerror" class="btn-primary">enter site</a>   <span data-bind="text: errortext" class="text-error"></span> </template> 

then in javascript file necessary bindings

template.loginbox.viewmodel({   first: '',   last: '',   greeting: function() {     return "hello " + this.first() + " " + this.last();   },   canenter: function() {     return !!this.first() && !!this.last();   },   showerror: false,   errortext: function() {     if (this.canenter() || !this.showerror()) {       return '';     }     return "please enter first , last name";   } }); 

here we're binding value of input/text element property 'first' of viewmodel.

the result viewmodel object kept in sync input box. if change value in texbox value of viewmodel's 'first' property change , vice versa.

for more information http://viewmodel.meteor.com/