Geek Answers Handbook

Verifying Login to Meteor

I am trying to understand the example of Todos in Meteor. There is a piece of code that I cannot understand:

// Returns an event map that handles the "escape" and "return" keys and // "blur" events on a text input (given by selector) and interprets them // as "ok" or "cancel". var okCancelEvents = function (selector, callbacks) { var ok = callbacks.ok || function () {}; var cancel = callbacks.cancel || function () {}; var events = {}; events['keyup '+selector+', keydown '+selector+', focusout '+selector] = function (evt) { if (evt.type === "keydown" && evt.which === 27) { // escape = cancel cancel.call(this, evt); } else if (evt.type === "keyup" && evt.which === 13 || evt.type === "focusout") { // blur/return/enter = ok/submit if non-empty var value = String(evt.target.value || ""); if (value) ok.call(this, value, evt); else cancel.call(this, evt); } }; return events; };

What gives events['keyup '+selector+', keydown '+selector+', focusout '+selector] = function(){} ?

Why do we need to convert the following to a string: String(evt.target.value || "") ?

Should the evt argument of the specified function have .type, .target, and .target.value? What can i transfer to evt?

+4
source share
2 answers

I broke the question into three parts:

What do events ['keyup' + selector + ', keydown' + selector + ', focusout' + selector] = function () {} yield do?

The okCancelEvents method is a way to wrap keyup , keydown and focusout DOM events around a single function that processes the details of each function result in a user ok or cancel .

This gives an EventMap object that is attached to Template.todos.events so that all keyup , keydown and focusout go through ok or cancel through EventMap .

Why do we need to convert the following to a string: String (evt.target.value || "")?

I do not think this is necessary. var value = evt.target.value || "" var value = evt.target.value || "" works just as well because the browser interprets the string primitive as a string object .

Is the evt argument of the specified .type, .target, and .target.value function required? What can i transfer to evt?

The evt argument is the passed event from the keyup , keydown and focusout methods, and target and target.value are the target.value properties of this native event object. You do not need to create it manually.

+4
source

events['keyup '+selector+', keydown '+selector+', focusout '+selector] = function(){} creates a function for meteor display to display keypress events (keyup, keydown) and lost focus events (focus). This function is given and given to the meteor pattern system for binding to elements with a specific css selector.

The evt value contains the DOM event value that was triggered when events were triggered. The only thing that should be passed as evt is the original DOM event , set when the event was triggered, which is set by event (as a variable) if it fires.

I can best explain this with code. The todos example does the same, except that it uses a css selector to bind events to elements:

 <input type="text" onkeyup="doSomething(event);"/> <script> //js code function doSomething(evt) { console.log(evt.target.value) } </script>

String(evt.target.value || "") basically guarantees that if evt.target.value is a string, in case it is entered as something else. I am not 100% sure when it cannot be a string, but I assume that the browser does not always fire events standardly.

An event is not always necessary. But it is very useful. In the sample code, you specified it to determine which text field triggered the event and which keys were pressed.

Additional information about the event:

+4
source

More articles:


All Articles