Meteor shortcuts

Meteor is a framework that speeds up web development.

Before we start:

Install Sublime (recommended editor)

Install Cmder (recommended command prompt)

Create new app

Cmder:

meteor create simple-todos

cd simple-todos meteor npm install meteor

Browser:

http://localhost:3000

File:
Open folder > simple-todos


Best Practices (my own)

• Different modules for different sections of website e.g. head, body, footer
• Each module has a file for its look (html) and a file for what it does (js) e.g. body.html, body.js
• Load sequence: main.js --> [others].js --> [others].html

Create a template
<template>... </template>

Call a template
{{>templateName}}


Import all JS using the main JS file
Sublime: /client/main.js

import '../imports/ui/body.js';

Add logic or data
{{#each}} ...{{/each}} and {{#if}}...{{/if}}



DISPLAY COLLECTION OF DATA
JS file:
Template.body.helpers({
  mybunch: [
    { mysentence: 'This is task 1x' },
    { mysentence: 'This is task 2' },
    { mysentence: 'This is task 3' },
  ],
});
HTML file:
<ul>
      {{#each mybunch}}
        {{> mytemplate1}}
      {{/each}}
</ul>

<template name="mytemplate1">
  <li>{{mysentence}}</li>
</template>


FORM WITH RESPONSIVE BUTTONS
HTML file:
<template name="mytemplate2">
  <li class="{{#if checked}}checked{{/if}}">

    <button class="delete">&times;</button>

    <input type="checkbox" checked="{{checked}}" class="toggle-checked" />

    <span class="text">{{text}}</span>
  </li>
</template>
JS File: (use event listener "template.task.events" to listen for the event "click" located in css tag "toggle-checked"; when triggered, it UPDATE into the "Tasks" collection)

Template.task.events({

  'click .toggle-checked'() {

    // Set the checked property to the opposite of its current value

    Tasks.update(this._id, {

      $set: { checked: ! this.checked },

    });

  },

});

HTML file:

<template name="mytemplate2">

  <li class="{{#if checked}}checked{{/if}}">




    <button class="delete">&times;</button>




    <input type="checkbox" checked="{{checked}}" class="toggle-checked" />




    <span class="text">{{text}}</span>

  </li>

</template>

Template.task.events({

  'click .delete'() {

    Tasks.remove(this._id);

  },

});

CREATE A DATABASE
Sublime: /imports/tasks.js
import { Mongo } from 'meteor/mongo';
export const Tasks = new Mongo.Collection('tasks');
Server must import: /server/main.js

import '../imports/api/tasks.js';

Client must import: /imports/body.js

import { Tasks } from '../api/tasks.js';

Template.body.helpers({
  tasks() {
    return Tasks.find({});
  },
});

ADD ENTRY TO DATABASE MANUALLY

Cmder:
meteor mongo
db.tasks.insert({ text: "Hello world!", createdAt: new Date() });


ADD FORM
HTML File:

       <form class="new-task">

        <input type="text" name="text" placeholder="Type to add new tasks" />

      </form>

JS File: (use event listener "template.body.events" to listen for the event "submit" located in css tag "new-task"; when triggered, it INSERT into the "Tasks" collection)

Template.body.events({

  'submit .new-task'(event) {

    // Prevent default browser form submit

    event.preventDefault();

    // Get value from form element

    const target = event.target;

    const text = target.text.value;

    // Insert a task into the collection

    Tasks.insert({

      text,

      createdAt: new Date(), // current time

    });

    // Clear form

    target.text.value = '';

  },

});

SHOW NEWEST TASK AT THE TOP:
return Tasks.find({}, { sort: { createdAt: -1 } });