Question

我已经在模板渲染上初始化了选择框和日期选择器，但是当我在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,
});

因此，对于我动态创建的每个元素，我必须重写此初始化代码。是否有可能我只编写一次初始化，而新创建的元素也接受这种初始化？

Answer 1

你的结构错了。您需要从模板的C回调中初始化日期选择器，就像这样。

HTML

onRendered

此外，如果您要渲染此日期选择器的多个实例，则应将<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>属性更改为id。

THE JS

class

每次在物化中创建组件时是否需要初始化组件？

1 个答案: