如何使用流星动态创建Div，然后根据数据库中的ID存储和调用它们

下面我有一个具有数字输入表单的基本模板。当你在表格中输入一个数字并点击添加创建的Divs列表。 Div是用一种“合成器”和一个“合成器”+一个数字来创建的。这些数字是以柜台为基础的。如何使用流星动态创建Div，然后根据数据库中的ID存储和调用它们

我不仅希望将这些信息存储在数据库中，而且要这样做（最终）当用户登录时，他们将有权访问他们的Div的列表，作为他们先前登录的“已保存状态”

我甚至不确定我是否以适当的方式解决这个问题。我只是将createSynth（）函数粘贴到列表的集合插入中。我有一种感觉要做到这一点“正确”，我应该有两个并行工作的事件 - 一个发送到列表集合，另一个发送到dom/Template。然后这两个区块将交换数据（一些如何），这些数据一起产生“保存状态”的幻觉。

以下是我迄今的代码。

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

来源

2013-03-05 William

我希望我可以改进我的答案有点你可以提供一些关于这些合成器盒子有什么的更多细节？ – Akshat 2013-03-05 17:24:09

他们只是div的CSS样式，使他们成为橙色块（我没有包括上面的CSS）。他们实际上没有任何内容。 – William 2013-03-07 01:43:52

你必须使用一个稍微不同的方法来此，基本上只需要插入你的东西到集合，并使用手把得到它出。我不完全相信你在做什么，但你应该得到一个好主意，用下面

服务器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 
}

HTML：

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

来源

2013-03-05 07:34:17 Akshat

我把你的html代码放在里，我得到一个错误。请原谅我对流星的经验不足。我正在学习整个堆栈。我只是想能够点击一个按钮来创建发送到客户端但也存储在服务器上的div，然后如果用户关闭浏览器，他们仍然可以通过点击另一个按钮来从数据库中检索这些div。这也将它们传送回客户端。这是学习目的的最终短期目标。只需基本的输入和输出一个基本的用户界面。 – William 2013-03-06 22:57:10

可能最好每次在客户端需要它们时动态地重新创建DIV，所以DIV不存储在服务器。如果你真的想在服务器上硬编码/存储DIV，只需将HTML保存为一个字符串，就可以将它保存到Meteor集合中。

来源

2014-01-08 00:33:13

如何使用流星动态创建Div，然后根据数据库中的ID存储和调用它们

回答

相关问题