Meteor – Forms

Meteor – Forms ”; Previous Next In this chapter, we will learn how to work with Meteor forms. Text Input First, we will create a form element with text input field and a submit button. meteorApp.html <head> <title>meteorApp</title> </head> <body> <div> {{> myTemplate}} </div> </body> <template name = “myTemplate”> <form> <input type = “text” name = “myForm”> <input type = “submit” value = “SUBMIT”> </form> </template> In a JavaScript file, we will create the submit event. We need to prevent default event behavior to stop the browser from refreshing. Next, we are going to take the content of the input field and assign it to textValue variable. In the following example, we will only log that content to developers console. And the last thing we need is to clear the input field. meteorApp.js if (Meteor.isClient) { Template.myTemplate.events({ ”submit form”: function(event) { event.preventDefault(); var textValue = event.target.myForm.value; console.log(textValue); event.target.myForm.value = “”; } }); } When we type “Some text…” in our input field and submit it, the console will log the text we entered. Radio Buttons A similar concept can be used for radio buttons. meteorApp.html <head> <title>meteorApp</title> </head> <body> <div> {{> myTemplate}} </div> </body> <template name = “myTemplate”> <form> <input type = “radio” name = “myForm” value = “form-1”>FORM 1 <input type = “radio” name = “myForm” value = “form-2”>FORM 2 <input type = “submit” value = “SUBMIT”> </form> </template> meteorApp.js if (Meteor.isClient) { Template.myTemplate.events({ ”submit form”: function(event) { event.preventDefault(); var radioValue = event.target.myForm.value; console.log(radioValue); } }); } When we submit the first button, the console will show the following output. Checkbox Following example shows how to use checkboxes. You can see that we are just repeating the same process. meteorApp.html <head> <title>meteorApp</title> </head> <body> <div> {{> myTemplate}} </div> </body> <template name = “myTemplate”> <form> <input type = “checkbox” name = “myForm” value = “form-1”>FORM 1 <input type = “checkbox” name = “myForm” value = “form-2”>FORM 2 <input type = “submit” value = “SUBMIT”> </form> </template> meteorApp.js if (Meteor.isClient) { Template.myTemplate.events({ ”submit form”: function(event) { event.preventDefault(); var checkboxValue1 = event.target.myForm[0].checked; var checkboxValue2 = event.target.myForm[1].checked; console.log(checkboxValue1); console.log(checkboxValue2); } }); } Once the form is submitted, the checked input will be logged as true, while the unchecked one will be logged as false. Select Dropdown In the following example, we will learn how to use the select element. We will use the change event to update data every time the option changes. meteorApp.html <head> <title>meteorApp</title> </head> <body> <div> {{> myTemplate}} </div> </body> <template name = “myTemplate”> <select> <option name = “myOption” value = “option-1”>OPTION 1</option> <option name = “myOption” value = “option-2”>OPTION 2</option> <option name = “myOption” value = “option-3”>OPTION 3</option> <option name = “myOption” value = “option-4″>OPTION 4</option> </select> </template> meteorApp.js if (Meteor.isClient) { Template.myTemplate.events({ ”change select”: function(event) { event.preventDefault(); var selectValue = event.target.value; console.log(selectValue); } }); } If we choose the third option, the console will log the option value. Print Page Previous Next Advertisements ”;

Meteor – Check

Meteor – Check ”; Previous Next The check method is used for find out if the argument or types are matching the pattern. Installing Check Package Open the command prompt window and install the package. C:UsersusernameDesktopmeteorApp>meteor add check Using Check In the following example, we want to check if myValue is a string. Since it is true, the app will proceed without any errors. meteorApp.js var myValue = ”My Value…”; check(myValue, String); In this example, myValue is not a string but a number, hence the console will log an error. meteorApp.js var myValue = 1; check(myValue, String); Match Test The Match.test is similar to check, the difference being when the test fails instead of a console error, we will get a value without breaking the server. The following example shows how to test an object with multiple keys. meteorApp.js var myObject = { key1 : “Value 1…”, key2 : “Value 2…” } var myTest = Match.test(myObject, { key1: String, key2: String }); if ( myTest ) { console.log(“Test is TRUE…”); } else { console.log(“Test is FALSE…”); } Since the both keys are strings, the test is true. The console will log the first option. If we change the key2 to number, the test will fail and the console will log the second option. meteorApp.js var myObject = { key1 : “Value 1…”, key2 : 1 } var myValue = 1; var myTest = Match.test(myObject, { key1: String, key2: String }); if ( myTest ) { console.log(“Test is TRUE…”); } else { console.log(“Test is FALSE…”); } Print Page Previous Next Advertisements ”;

Meteor – Collections

Meteor – Collections ”; Previous Next In this chapter, we will learn how to use MongoDB collections. Create a Collection We can create a new collection with the following code − meteorApp.js MyCollection = new Mongo.Collection(”myCollection”); Add Data Once the collection is created, we can add data by using the insert method. meteorApp.js MyCollection = new Mongo.Collection(”myCollection”); var myData = { key1: “value 1…”, key2: “value 2…”, key3: “value 3…”, key4: “value 4…”, key5: “value 5…” } MyCollection.insert(myData); Find Data We can use the find method to search for data in the collection. meteorApp.js MyCollection = new Mongo.Collection(”myCollection”); var myData = { key1: “value 1…”, key2: “value 2…”, key3: “value 3…”, key4: “value 4…”, key5: “value 5…” } MyCollection.insert(myData); var findCollection = MyCollection.find().fetch(); console.log(findCollection); The console will show the data we inserted previously. We can get the same result by adding the search parameters. meteorApp.js MyCollection = new Mongo.Collection(”myCollection”); var myData = { key1: “value 1…”, key2: “value 2…”, key3: “value 3…”, key4: “value 4…”, key5: “value 5…” } MyCollection.insert(myData); var findCollection = MyCollection.find({key1: “value 1…”}).fetch(); console.log(findCollection); Update Data The next step is to update our data. After we have created a collection and inserted new data, we can use the update method. meteorApp.js MyCollection = new Mongo.Collection(”myCollection”); var myData = { key1: “value 1…”, key2: “value 2…”, key3: “value 3…”, key4: “value 4…”, key5: “value 5…” } MyCollection.insert(myData); var findCollection = MyCollection.find().fetch(); var myId = findCollection[0]._id; var updatedData = { key1: “updated value 1…”, key2: “updated value 2…”, key3: “updated value 3…”, key4: “updated value 4…”, key5: “updated value 5…” } MyCollection.update(myId, updatedData); var findUpdatedCollection = MyCollection.find().fetch(); console.log(findUpdatedCollection); The console will show that our collection is updated. Delete Data Data can be deleted from the collection using the remove method. We are setting id in this example as a parameter to delete specific data. meteorApp.js MyCollection = new Mongo.Collection(”myCollection”); var myData = { key1: “value 1…”, key2: “value 2…”, key3: “value 3…”, key4: “value 4…”, key5: “value 5…” } MyCollection.insert(myData); var findCollection = MyCollection.find().fetch(); var myId = findCollection[0]._id; MyCollection.remove(myId); var findDeletedCollection = MyCollection.find().fetch(); console.log(findDeletedCollection); The console will show an empty array. If we want to delete everything from the collection, we can use the same method, however, instead of id we will use an empty object {}. We need to do this on the server for security reasons. meteorApp.js if (Meteor.isServer) { MyCollection = new Mongo.Collection(”myCollection”); var myData = { key1: “value 1…”, key2: “value 2…”, key3: “value 3…”, key4: “value 4…”, key5: “value 5…” } MyCollection.insert(myData); MyCollection.remove({}); var findDeletedCollection = MyCollection.find().fetch(); console.log(findDeletedCollection); } We can also delete data using other parameters. As in the previous example, Meteor will force us to do this from the server. meteorApp.js if (Meteor.isServer) { MyCollection = new Mongo.Collection(”myCollection”); var myData = { key1: “value 1…”, key2: “value 2…”, key3: “value 3…”, key4: “value 4…”, key5: “value 5…” } MyCollection.insert(myData); MyCollection.remove({key1: “value 1…”}); var findDeletedCollection = MyCollection.find().fetch(); console.log(findDeletedCollection); } It can be seen that the data is deleted from the command window. Print Page Previous Next Advertisements ”;