How to make dynamically created Divs with meteor and then store & recall them based on ID from the database

Below I have a basic template that has a numerical input form. When you type a number in the form and click Add a list of Divs get created. The Divs are created with a class of "synth" and an id of "synth" + a number. The numbers go in succession based on a counter.

I want to not only store this information in the database but do so in a manner that (eventually) when a user logs in they will have access to their list of Divs as a "saved state" from their previous log in.

I am not even sure if I am going about this in an appropriate manner. I am simply sticking the createSynth() function in the Collection insert for lists. I have a feeling to do this "correctly" I should have two events that work in parallel - one sending to the lists Collection and the other to the dom/Template. These two blocks would then exchange data (some how) which in conjunction create the illusion of a "saved state".

Below is the code I have thus far.

HTML

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

<body>

  {{> start}}

</body>

<template name="start">
  <input id ="amount" type ="number" />
  <input id ="submit" type="button" value="Add" />
  <div id="applicationArea"></div>
</template>

Javascript

var lists = new Meteor.Collection("Lists");
var counter = 0;
counterSynth = 0;


if (Meteor.isClient) {

'use strict';
  Template.start.events({
    'mousedown #submit' : function () {
       var amount = document.getElementById("amount").value;

       for(i=0;i<amount;i++)  {
       lists.insert({SoundCircle:createSynth()});  // I am inserting the entire function call, is this the right path?

       }

        function createSynth() {
          var synth = document.createElement("div"); 
          synth.className  = "synth";                         
          synth.id = "synth" + (counterSynth++);
          applicationArea.appendChild(synth);

        };

    },



  });


}

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

Answers


You have to use a slightly different approach to this, basically just insert your stuff into the collection, and use handlebars to get it out. I'm not entirely sure what you were doing but you should get a good idea with the below

Server js

synths = new Meteor.Collection('synths');   //This will store our synths

Client js:

synths = new Meteor.Collection('synths');   //This will store our synths

Template.start.events({
'mousedown #submit' : function () {
   var amount = document.getElementById("amount").value;

   for(i=0;i<amount;i++)  {
       lists.insert({class:"synth", id:counterSynth}); 
   }
},

});

Template.start.synth = function() {
  return synths.find();  //This gives data to the html below
}

HTML:

{{#each synth}}
    <div class="{{class}}" id="synth{{id}}">
        Synth stuff here
    </div>
{{/each}

It's probably best to dynamically recreate the DIVs every time you need them on the client, so the DIV is not stored on the server. If you really want to hard code/store the DIV on the server you would need to simply save the HTML as a string, to a Meteor collection.


Need Your Help

WIX - run a VB script from working directory after installation.

c# wix windows-installer wix3.5

I am having a issue with WIX. During installation of MSI I want to verify .NET framework 4.0 is installed or not, if not then I have to install from dotnet msi.