— March 12, 2014

MeteorCast #1: Intro to C.R.U.D.

Basically just an intro into how to interact with a database in Meteor.JS. To run this yourself, you can get the code below the video.

HTML

<head>
  <title>SpeedyRentals</title>
</head>

<body>



</body>

<template name="newRental">
  <h1>New Rental</h1>

  <input type="button" value="New Rental" class="new_rental" />

  <div class="rental_form">
    <input type="text" class="rental_name" placeholder="Name" />
    <input type="text" class="rental_make" placeholder="Make" />
    <input type="text" class="rental_model" placeholder="Model" />
    <input type="submit" class="rental_submit" />
  </div>

</template>

<template name="airplanes">

  <table>
    <tr>
      <th>Name</th>
      <th>Make</th>
      <th>Model</th>
      <th></th>
    </tr>


      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><a href="#" class="delete">Delete</a></td>
      </tr>


  </table>

</template>

Javascript

var Airplanes = new Meteor.Collection("airplanes");

if (Meteor.isClient) {

  Template.newRental.rendered = function() {
    $('.rental_form').hide();
  };

  Template.newRental.events({

    'click .new_rental': function () {

      $('.rental_form').toggle();

    },

    'click .rental_submit': function() {

      Airplanes.insert({
        name: $('.rental_name').val(),
        make: $('.rental_make').val(),
        model: $('.rental_model').val()
      });

    }

  });

  Template.airplanes.rentals = function() {
    return Airplanes.find({});
  };

  Template.airplanes.events({
    'click a.delete': function(e) {
      e.preventDefault();
      Airplanes.remove(this._id);
    }
  });

}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}