CODEWITHSUNDEEP
meteor
William
William

Reputation: 4588

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
  });
}

Upvotes: 3

Views: 1282

Answers (2)

Giant Elk
Giant Elk

Reputation: 5685

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.

Upvotes: 0

Tarang
Tarang

Reputation: 75945

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}

Upvotes: 0

Related Questions