Menu
I saw this tutorial coding a demo app with Angular.js. Its the Todo demo (http://angularjs.org) where he just types in a text box and it is then reflected on the page easily.
I wanted to re-create this feature in Meteor and it is not working that well. Firstly, for some reason it does not update the last letter. Also the demo video doing this with Angular.js is much easier and works better, is there a better way to do this in Meteor?
Also if there a way to access the DOM instead the helper function? In the events function I can use the 't' variable to access the DOM but in the helpers function I am not sure how, like for example if I wanted to grab text from a div inside the helper function. I am not sure how.
Here is my Meteor code, and here is a live demo: http://todotestapp.meteor.com
Thanks in advance
HTML
<head>
<title>Todo</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<input id="personName" type="text">
<h1>Hello {{personName}}!</h1>
</template>
Meteor Javascript
if (Meteor.isClient) {
Template.hello.helpers({
personName: function () {
return Session.get("personName");
}
});
Template.hello.events({
'keypress #personName': function (e, t) {
Session.set("personName", t.find("#personName").value);
}
});
}
959
You should use the "input" event. No need to use jQuery, template instance .find method is fine.
Template.hello.events({
'input #personName': function (e, t) {
Session.set("personName", t.find("#personName").value);
}
});
This works as expected.
71
1) Use the keyup event to detect when a new letter has been entered 2) Use normal jquery to get the value so do:
Template.hello.events({
'keyup #personName': function () {
Session.set("personName", $("#personName").val());
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
