CRUD Teams

While we can change the data quite easily in the console and Mongol, it's time to build some UI to do this on our page.

To do this, we'll make a simple 'Create team' button, which morphs into a text field when you click on it.

client/views/teams.html

<template name="teams">
  <h3>Teams</h3>
  {{#if isCreatingTeam}}
    <form class="create-team">
      <input name="name" type="text">
      <button type="submit">Submit</button>
      <a class="cancel" href="#">Cancel</a>
    </form>
  {{else}}
    <a class="create" href="#">Create</a>
  {{/if}}

  <ul>
    {{#each teams}}
      <li>{{name}}</li>
    {{/each}}
  </ul>
</template>

Here we use a helper (isCreatingTeam) to give some state to our application. Since we haven't defined it in our helpers it will default to false.

To get our form showing we could do this:

client/views/teams.js

Template.teams.helpers({
  isCreatingTeam: function(){
    return true;
  },
  teams: function(){
    return Teams.find();
  }
});

But obviously we want this to be dynamic and changable. To do this we can make use of Meteor's reactivity.