MeteorJS의 양식 필드를 동적으로 추가하십시오.

Question

그래서 사람들이 퀴즈를 만들 수있는 퀴즈 앱을 만들고 있는데, 어떻게 유성이 동적 폼을 처리 할 수 ​​있는지 더 잘 이해하고 싶습니다. 퀴즈는 '스타 워즈 캐릭터는 당신입니까?'

그런 다음 사용자는 퀴즈를 만들기 위해 Chewbacca, R2D2 등과 같은 '기술 명사'를 입력합니다. 그러나 사용자가 더 많은 선택을 추가하기 위해 추가 버튼을 클릭하여 설명적인 명사의 수를 선택할 수 있기를 바랍니다. 사물의 HTML 측면에서 'descriptive-noun2', 'descriptive-noun3'과 같은 이름 속성을 변경하는 방법을 알아낼 수는 있지만 제출 이벤트에 대해이 작업을 수행하는 방법을 알 수는 없습니다. 이것들은 또한 그들과 관련된 이미지를 가질 것입니다. 배열로 제출할 수있는 방법이 있습니까? 아니면 데이터베이스에 동적으로 제출할 수있는 방법이 있습니까? 고맙습니다!

HTML :

<div class="control-group noun">    
     <label class="control-label" for="descriptive-noun"></label> 
     <div class="controls"> 
      <input name="descriptive-noun" type="text" value=""/> 
     </div> 
    </div> 

    <div class="control-group noun">    
     <label class="control-label" for="descriptive-noun"></label> 
     <div class="controls"> 
      <input name="descriptive-noun" type="text" value=""/> 
     </div> 
    </div> 

자바 스크립트 :

Template.quizSubmit.events({ 
'submit form': function(e) { 
    e.preventDefault(); 

    var quiz = {  
     title: $(e.target).find('[name=title]').val(), 
     descriptive_noun1: $(e.target).find('[name=descriptive-noun').val(), 
     descriptive_noun2: $(e.target).find('[name=descriptive-noun').val() 
    } 

    quiz._id = Quizzes.insert(quiz); 
    Router.go('quizItemDetails', quiz); 
    } 

}); 

Answer 1

나는이 정말 HTML 양식에 대한 질문이라고 생각합니다.

먼저 HTML에 <form> 요소가 있어야합니다. 이 양식에는 작성한 <input> 필드가 포함됩니다. 제안한대로 새로운 <input> 요소를 동적으로 추가 할 수 있습니다.

<form id='form'> 
    <input name="descriptive-noun1" type="text" value=""/> 
    <input name="descriptive-noun2" type="text" value=""/> 
    <input name="descriptive-noun3" type="text" value=""/> 
    <button id="submit" type="submit">Submit</button> 
</form> 

그러면, 자바 스크립트 측에서, 이름 및 각 요소의 값을 포함하는 오브젝트의 배열을 갖이

Template.quizSubmit.events({ 
    'submit' : function(event) { 
    var formData = $('#form').serializeArray() 
    event.preventDefault(); 
    } 
}); 

가변 formData 같은 내부 데이터를 얻는다. 그런 다음 데이터베이스에 삽입 할 수 있습니다.