All geek questions in one place

Is there a better way to update html based on input field with Meteor.js?

I saw this tutorial coding a demo application with Angular.js. Its a demo version of Todo ( http://angularjs.org ), where it simply enters text into a text box, and then it is easily displayed on the page.

I wanted to recreate this feature in Meteor, and it does not work so well. Firstly, for some reason, he is not updating the last letter. Also the demo video made using Angular.js is much simpler and works better, is there a better way to do this in Meteor?

Also, if there is a way to access the DOM instead of a helper function? In the event function, I can use the variable 't' to access the DOM, but in the help function I am not sure, as, for example, if I wanted to grab the text from the div inside the helper function. I do not know how to do that.

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>

Javascript Meteor

 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); } }); }
+4
source share
2 answers

1) Use the keyup event to determine when the new letter is entered 2) Use normal jquery to get the value like this:

 Template.hello.events({ 'keyup #personName': function () { Session.set("personName", $("#personName").val()); } });
+4
source

You must use the input event. No need to use jQuery, the instance method of the .find instance is fine.

 Template.hello.events({ 'input #personName': function (e, t) { Session.set("personName", t.find("#personName").value); } });

This works as expected.

+5
source

Source: https://habr.com/ru/post/1498696/

More articles:


All Articles