Blaze dynamic data binding - angularjs

Question

Following is the angular example for simple input field model binding.
<div ng-app>
<div>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello {{yourName}}!</h1>
</div>
</div>
How can I replicate the same functionality using meteor-blaze with Jade, i.e. input field change event will update the corresponding helper.
Update
Below is my code in Blaze and Jade:
.form-group
lable
| Click buttons to increase their values:
input#user(type="text")
span
|{{usernameinput}}
Below is javascript code:
Template.unitconversion.helpers({
'nm': function(){ return "100" }
});
Template.unitconversion.events({
'keyup #user': function(evt, tmpl){
var tor = tmpl.find('#user').value;
console.log(tor);
//console.log(evt);
//console.log(tmpl);
Template.unitconversion.helpers({
'usernameinput': function()
{
return tor
}
});
}
});
I was expecting the helper function to update the 'usernameinput' whenever user input is changed but nothing happens. I do get the expected console output whenever input field changes.
Any help would be appreciated to solve it.

Answer 1

Let me answer your question in "spacebars". I think you should be able to translate it to "jade" easily. First make sure you add reactive-dict package:
meteor add reactive-dict
It's little more complicated than you might have expected, but the following code should do the the job pretty well:
<template name="hello">
<h1>Wellcome {{myName}}!</h1>
<p>
Tell your name <input type="text" name="myName" value="{{myName}}"/>
</p>
</template>
and the corresponding javascript:
Template.hello.onCreated(function () {
this.state = new ReactiveDict();
});
Template.hello.helpers({
myName: function () {
return Template.instance().state.get('myName');
},
});
Template.hello.events({
'keyup input[name]': function(e, t) {
t.state.set($(e.target).attr('name'), $(e.target).val());
}
});
The reason this is so "complicated" is because Meteor does not offer a built-in two-way-data binding support. It does not mean it can't be done as the above example shows.
You can read more about two-way-data-binding in meteor cookbook here:
https://github.com/awatson1978/meteor-cookbook/blob/master/cookbook/data-binding.md#two-way-data-binding-1

Answer 2

As per Michel Floyd guidance following is the working code:
Jade Template:
.form-group
lable
| Click buttons to increase their values:
input#user(type="text")
span
| {{usernameinput}}
Javascript:
var usernameinput = new ReactiveVar(0);
Template.unitconversion.helpers({
usernameinput: function(){ return usernameinput.get();
}
});
Template.unitconversion.events({
'keyup #user': function(evt, tmpl){
var tor = tmpl.find('#user').value;
console.log(tor);
usernameinput.set(tor);
}
});