3

以下に、数値入力フォームを持つ基本的なテンプレートを示します。フォームに数値を入力して [追加] をクリックすると、Div のリストが作成されます。Div は "synth" のクラスと "synth" + 数値の ID で作成されます。数字はカウンターに基づいて連続します。

この情報をデータベースに保存するだけでなく、(最終的に) ユーザーがログインしたときに、以前のログインから「保存された状態」として Div のリストにアクセスできるようにしたい.

適切な方法でこれを行っているかどうかさえわかりません。リストの Collection 挿入に createSynth() 関数を貼り付けているだけです。これを「正しく」実行したいという気持ちがあります。並行して動作する 2 つのイベントが必要です。1 つはリスト コレクションへの送信、もう 1 つは dom/Template への送信です。これらの 2 つのブロックはデータを (何らかの方法で) 交換し、それが組み合わさって「保存された状態」の錯覚を生み出します。

以下は、これまでのコードです。

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

2 に答える 2

0

これには少し異なるアプローチを使用する必要があります。基本的には、コレクションに自分のものを挿入し、ハンドルバーを使用してそれを取り出すだけです。あなたが何をしていたのか完全にはわかりませんが、以下で良いアイデアが得られるはずです

サーバー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-05T07:34:17.930 に答える
0

DIV がサーバーに保存されないように、クライアントで DIV が必要になるたびに DIV を動的に再作成することをお勧めします。DIV をサーバーにハードコーディング/保存したい場合は、HTML を文字列として Meteor コレクションに保存するだけで済みます。

于 2014-01-08T00:33:13.857 に答える