Learning Meteor.js [Part 24]: Add and remove items to order using a local collection

At this point I don't have any form of authentication set up so I am not quite ready to start adding records into the database. One thing you can do to keep working on the application without modifying the database is to use local collections. They behave the same as the mongo-backed collections but they stay only on the client.

To create a local collection pass 'null' to the meteor collection constructor:

import { Mongo } from 'meteor/mongo';
export const Meals = new Mongo.Collection(null);

Now, for example, when a recipe is dropped into the meal, a mongo update can be executed which will modify the document in memory:

interact('.orderDetailsPart .dropzone').dropzone({
    ondrop: function (event) {
        var mealId = $(event.target).data('id');
        var meal = Meals.findOne(mealId);
        var recipeId = $(event.relatedTarget).data('id');
        var recipeId = Recipes.findOne(recipeId);

       meal.items.push({
           id: recipeId ,
           name: recipeId .name,
           type: 'recipe',
           imageUrl: recipeId .imageUrl
       });

       Meals.update(mealId, meal);
    }
});

The local collection is reactive so any changes done to it will automatically be detected and any UI element that is bound to it will be updated. You can checkout the source up to this point by using this commit or visit the live demo.