Динамическое обобщение и удаление форм с помощью метеора и автоформы Aldeed

Question

Я использую метеор и автоформу Aldeed для заполнения своей базы данных. Базовая функциональность, которую я хочу достичь, заключается в следующем:

• Основная форма связана с коллекцией, как обычно.
• В основной форме есть кнопка add secondary который динамически добавляет формы, связанные с другой коллекцией.
• Вторая форма имеет remove кнопка, которая удаляет его.

Я следовал описанной здесь методике и собрал следующий код:

        <template name="PricipalForm">

        {{#autoForm collection="principal" id="Principalform" type="insert" }}
            <fieldset>
                <legend>Principal form</legend>
                {{> afQuickField name='field1'}}
                {{> afQuickField name='field2'}}
                <button id='add-inputs' type="button">
                        Add Proposal
                 </button>

                 {{#each inputs}}
                        {{> AddSecond}}
                 {{/each}}

            </fieldset>
            <button type="submit" class="btn btn-primary">Insert</button>
        {{/autoForm}}
    </template>

./Templates/PrincipalForm.html

//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////

Template.PrincipalForm.onCreated(function() {
   Session.set('props', []);
 });


  Template.Create.events({
     'click #add-inputs': function () {
      var inputs = Session.get('inputs');
      var uniqid = Math.floor(Math.random() * 100000); /
      inputs.push({uniqid: uniqid});
      Session.set('inputs', inputs);
      }
  });

  Template.Create.helpers({
      inputs: function(){
         return Session.get('inputs');
       }
   });


./Templates/PrincipalForm.js


 ////////////////////////////////////////////////////
 ///////////////////////////////////////////////////


 <template name ="SecondaryFrom">

     {{#autoForm collection="secondary" id="secondaryForm" type="insert" }}
      <fieldset>
       <legend> One instance of secondary form </legend>
          {{> afQuickField name='fieldA'  }}
          {{> afQuickField name='fieldB'}}
      </fieldset>
      <button class='remove-inputs' uniqid="{{uniqid}}" type="button">Remove</button>
{{/autoForm}}

</template>


  ./Templates/SecondaryForm.html

  //////////////////////////////////////////
  //////////////////////////////////////////

  Template.AddProposal.events({
     'click .remove-inputs': function(event) {
         var uniqid = $(event.currentTarget).attr('uniqid');
         var props = Session.get('inputs');
         props = _.filter(props, function(x) { return x.uniqid != uniqid; });
         Session.set('inputs', inputs);
          },

   });


  ./Templates/SecondaryForm.js

Этот код работает нормально, есть только одна ошибка, которую я не понимаю:

• Я сначала добавляю 3 вторичные формы и помещаю значения abc, efg, hij в fieldA из этих трех форм соответственно.
• Затем я удаляю вторую вторичную форму с efg и я понимаю, что остальные abc а также efg!!
• где это становится более странным, что когда я проверяю uniqid удаленной формы является ожидаемой (и соответствует предыдущей efg).

Таким образом, кажется, что когда я удаляю форму динамически, значения, которые я ввожу, как-то сохраняются.

Может кто-нибудь, пожалуйста, помогите:

• Что не так в том, что я делаю, как я могу это исправить?
• Возможно, есть лучший способ сделать то, что я пытаюсь сделать?

Я также попытался проверить ответ здесь, но предоставленные ссылки были сломаны.

Спасибо

Answer 1

Я решил проблему, полностью используя aldeed:autoform а также aldeed:collection2для того, чтобы сгенерировать мою форму, а не вставлять вторичный шаблон вручную.

Это может быть достигнуто путем создания двух требуемых схем как обычно, а затем размещения вторичной схемы в виде массива на первичной.

Тогда речь идет об использовании {{> afArrayfield}} в автоформе для достижения намеченного результата, изложенного в вопросе.

Код будет выглядеть так:

//Schema definition:  
Primary = new Mongo.collection('Primary');
secondary = new SimpleSchema({
   /* ... */
 });
 primary = new SimpleSchema({
   /*...*/
  secondaries:{
   type:[secondary]
  }
 });

Primary.attachSchema(primary);

//On the HTML form:
{{autoform collection="Primary" id= "form_example" type="insert"}}
<fieldset>
   /* any fields*/
   {{afArrayField name = 'secondaries'}}
</fieldset>
{{/autoform}}