コンポーネントをマテリアライズで作成するたびに、コンポーネントを初期化する必要がありますか？

Question

テンプレートレンダリングでselect boxとdatepickerを初期化しましたが、新しい日付要素を動的に作成するか、jsで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, 
}); 

このように、私は動的に作成する各要素に対して、この初期化コードを書き直さなければなりません。私はこの初期化を1回だけ書くことができ、新しく作成された要素もこの初期化を受け入れますか？

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