如何使用meteor动态创建div，然后存储&；根据数据库中的ID调用它们_Meteor

如何使用meteor动态创建div，然后存储&；根据数据库中的ID调用它们

meteor

如何使用meteor动态创建div，然后存储&；根据数据库中的ID调用它们,meteor,Meteor,下面我有一个基本的模板，它有一个数字输入表单。在表单中键入数字并单击“添加”时，将创建一个div列表。div是用一个类“synth”和一个id“synth”+一个数字创建的。这些数字是根据计数器连续排列的我不仅希望将这些信息存储在数据库中，而且这样做的方式是（最终）当用户登录时，他们将能够从以前的登录中以“已保存状态”的形式访问他们的div列表我甚至不确定我是否以适当的方式进行这项工作。我只是将createSynth（）函数粘贴到列表的集合insert中。我觉得要做到这一点“正确”，我应该有

下面我有一个基本的模板，它有一个数字输入表单。在表单中键入数字并单击“添加”时，将创建一个div列表。div是用一个类“synth”和一个id“synth”+一个数字创建的。这些数字是根据计数器连续排列的

我不仅希望将这些信息存储在数据库中，而且这样做的方式是（最终）当用户登录时，他们将能够从以前的登录中以“已保存状态”的形式访问他们的div列表

我甚至不确定我是否以适当的方式进行这项工作。我只是将createSynth（）函数粘贴到列表的集合insert中。我觉得要做到这一点“正确”，我应该有两个并行工作的事件——一个发送到列表集合，另一个发送到dom/模板。然后，这两个块将交换数据（某种方式），这些数据结合在一起会产生“保存状态”的错觉

以下是迄今为止我所掌握的代码

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

var list=新Meteor.Collection（“列表”）；
var计数器=0；
反同步=0；
if（Meteor.isClient）{
"严格使用",；
Template.start.events({
“mousedown#submit”：函数（）{
var金额=document.getElementById（“金额”）.value；
对于（i=0；i您必须使用稍微不同的方法，基本上只需将您的物品插入收藏，然后使用把手将其取出。我不完全确定您在做什么，但您应该对以下内容有一个好的想法
服务器js
synths = new Meteor.Collection('synths');   //This will store our synths

客户端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
}

synths=new Meteor.Collection（'synths'）；//这将存储我们的synth
Template.start.events({
“mousedown#submit”：函数（）{
var金额=document.getElementById（“金额”）.value；
对于（i=0；i每次在客户端上需要DIV时，最好动态地重新创建它们，这样DIV就不会存储在服务器上。如果你真的想硬编码/存储DIV在服务器上，你只需将HTML保存为字符串，保存到Meteor集合中即可。我希望我的答案能改进一点，你能提供更多的细节吗关于每个synth div框都有什么？它们只是用CSS设计的div，使它们成为橙色块（我没有包括上面的CSS）。它们实际上里面没有任何内容。我将您的html代码放在了中，但出现了一个错误。请原谅我对meteor缺乏经验。我正在学习整个堆栈。我只希望能够单击一个按钮，创建div，该div被传输到客户端，但也存储在服务器上，然后如果用户关闭浏览器，就可以了仍然可以通过单击另一个按钮从数据库中检索以前存储的div，该按钮也会将这些div传输回客户端。这是学习的最终短期目标。只需使用基本UI进行基本输入和输出。
{{#each synth}}
    <div class="{{class}}" id="synth{{id}}">
        Synth stuff here
    </div>
{{/each}