CRUD Example

add-taco-server.js

/*
 Meteor allows you to store functions on the server for handling things like data.
 This is the server-side component to the Meteor.call() example in add-taco.js.
*/

Meteor.methods({
  // Define our method. Note, we're passing an argument for the tacoToInsert value we passed to our Meteor.call() method.
  'addTaco': function(tacoName){
    // Here we do our insert again.
    Tacos.insert({
      taco: tacoName
    }, function(error){
      if (error) {
        // We can toss an error to the user if something fudges up.
        return error.reason;
      }
    });
  }
});

add-taco.html

<template name="addTaco">
  <form id="add-taco">
    <input type="text" name="tacoName" placeholder="What's yummy?">
    <button type="submit">Add Tasty Taco</button>
  </form>
</template>

add-taco.js

/*
 This is what I like to refer to as my "controller." Here, we handle interacting with the form
 and inserting our data into the DB. Note: I've shown two methods here, one just doing a client-side insert (frowned upon, but possible)
 and a server-side insert (a little more secure).
 */
 
 // Meteor uses an "event map" to handle interaction on the template.
 
 Template.addTaco.events({
  'submit form': function(e,t){
    // Version 1: Just do a client-side insert into your DB. The argument t allows us to acces the template.
    Tacos.insert({
      taco: t.find('[name="tacoName"]').value
    }, function(error){
      if (error) {
        // We can toss an error to the user if something fudges up.
        alert(error.reason);
      }
    });
    
    // Version 2: In conjunction with the add-taco-server.js file below, Meteor offers "methods" which allow you to call to
    // server-side code from the client. This is nice for keeping data functions out of the client for security reasons. Also
    // a little tidier if you're a stickler about cleanliness.
    var tacoToInsert = t.find('[name="tacoName"]').value;
    
    Meteor.call('addTaco', tacoToInsert, function(error,response){
      if (error) {
        // Same convention as above with errors :)
        alert(error.reason);
      } else {
        // If you're doing synchronous work on the server, you can get a result here.
      }
    });
  }  
 });

tacos-collection.js

/*
  Meteor collections can be defined on the client/server. These are essentially "tables" in an SQL database.
*/

Tacos = new Meteor.Collection('tacos');

// To handle security, Meteor gives you access to Allow and Deny rules on the client. It gives a handful of operations to listen for,
// the three big ones being: insert, update, and delete. Here we just deny ALL client-side inserts (this would "break" the example in add-taco.js where I show doing Tacos.insert() directly on the client).
Tacos.allow({
  insert: function(){
    // This translates to "Should I allow client-side inserts?" and us saying "False, or no, don't do that!"
    return false;
  },
  update: function(){
    return false;
  },
  delete: function(){
    return false;
  }
});

tacos-list.html

<!-- 
 Meteor makes use of Handlebars templates for rendering HTML on the client. 
 This is an example of a tempalte where you'd use an {{each}} loop to pull data out of your DB.
-->
<template name="tacos">
  <h3>My Favorite Tacos</h3>
  {{#if tacos}}
    <ul class="tacos-list">
    {{#each tacos}}
      {{>taco}}
    {{/each}}
    </ul>
  {{/if}}
</template>

<template name="taco">
  <!-- Because Meteor relies heavily on reactivity and watches for changes on the template, it's helpful to break up components into separate templates to encapsulate reactivity (i.e. only reload/refresh what's changed).-->
  <li>{{taco.name}}</li>
</template>

xvcxcvxvxvxc

vxvxcv