구성 요소를 생성 할 때마다 구성 요소를 초기화해야합니까?

Question

템플릿 렌더링에서 선택 상자 및 날짜 표시기를 초기화했지만 jam에서 html을 사용하여 새로운 날짜 요소를 선택하거나 요소를 선택하면 요소에 대해 동일한 초기화 코드를 작성해야합니까? 구성 요소를 만들 때마다 초기화가 필요하지 않을 때 코드가 있습니까?

예를 들어 템플릿이 있습니다.

<template name="test"> 
<select class="input-field" id="today_select"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
</select> 

<input type="text" class="datepicker" id="today_date"> 
<div id="runtime_date"></div> 
</template> 

<script> 
$('.datepicker').pickadate({ 
     selectMonths: true, // Creates a dropdown to control month 
     selectYears: 15, // Creates a dropdown of 15 years to control year, 
     today: 'Today', 
     clear: 'Clear', 
     close: 'Ok', 
     closeOnSelect: false // Close upon selecting a date, 
    }); 

$('select').material_select(); 
</script> 

이제 값 1을 선택하면 div id runtime_date에 새로운 날짜 요소를 추가해야합니다. 하지만 요소를 만들 때 요소 추가 바로 아래에이 스크립트 블록을 다시 작성해야합니다. 그렇지 않으면 datepicker가 표시되지 않습니다.

$('.datepicker').pickadate({ 
    selectMonths: true, // Creates a dropdown to control month 
    selectYears: 15, // Creates a dropdown of 15 years to control year, 
    today: 'Today', 
    clear: 'Clear', 
    close: 'Ok', 
    closeOnSelect: false // Close upon selecting a date, 
}); 

동적으로 생성하는 각 요소에 대해이 초기화 코드를 다시 작성해야합니다. 이 초기화를 한 번만 쓰면 새로 생성 된 요소에서도이 초기화를 허용 할 수 있습니까?

Answer 1

구조가 잘못되었습니다. 템플릿의 onRendered 콜백에서 datepicker를 초기화해야합니다. 이 날짜 선택기의 여러 인스턴스를 렌더링 할 거라면

html로는

또한

<template name='datePickerTemplate'> 
<select class="input-field" id="today_select"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    </select> 

<input type="text" class="datepicker" id="today_date"> 
<div id="runtime_date"></div> 
</template> 

<template name='outer'> 
    {{ >datePickerTemplate }} 
    {{ >datePickerTemplate }} 
    {{ >datePickerTemplate }} 
    {{ >datePickerTemplate }} 
    <--! As many as you want --> 
</template> 

, 당신은 class에 id 속성을 변경해야합니다.

JS는

//This will fire every time an instance of datePickerTemplate is rendered. 
Template.datePickerTemplate.onRendered(() => { 
    $('.datepicker').pickadate({ 
    selectMonths: true, // Creates a dropdown to control month 
    selectYears: 15, // Creates a dropdown of 15 years to control year, 
    today: 'Today', 
    clear: 'Clear', 
    close: 'Ok', 
    closeOnSelect: false // Close upon selecting a date, 
    }); 
    $('select').material_select(); 
});