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

Question

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

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

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

 <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).

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

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

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

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

Благодаря

Answer 1

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

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

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

код будет выглядеть следующим образом:

//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}}