Question

我有Django应用程序，它使用webpack来编译前端。作为前端库我使用语义ui。最近我安装了单独的模块semantic-ui-calendar。

工作正常。在必需的js文件中，我可以写

  $('#event_starts_at_1').calendar({
      minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), today.getMinutes()),
      monthFirst: false,
  });

它将初始化日历组件。

ui-calendar组件使用了许多我将使用的选项。此外，我有多个页面，其中将嵌入ui-calendar。

我不想在每个js文件中为ui-calendar初始化重复相同的代码，并且只寻找一个只在组件中进行一次的解决方案。

对我来说问题看起来不太复杂，但我无法弄清楚如何用js和webpack解决它。可能你可以提供一些片段，它可以是ui-calendar的子类，也可以做一些其他事情来设置它。谢谢！

Answer 1

我可以看到你使用JQuery，所以这是一个建议。请注意，有几种不同的方法，这只是一种方法。

如果您不希望在自己的javascript中初始化每个元素，正如您在问题中的示例中所写，您可以随时将其抽象出来。

您可以考虑为所有日历元素添加类似semantic-calendar的类名。然后，在javascript文件中，使用文档就绪函数和foreach循环来初始化给定类的所有元素：

$( document ).ready(function() {
    $('.semantic-calendar').each(function(){ 
        $(this).calendar({
            minDate: new Date(today.getFullYear(), today.getMonth(), 
                today.getDate(), today.getHours(), today.getMinutes()),
            monthFirst: false
        });
    });
});

请注意，false之后的最后一个逗号已被删除。它不应该存在，因为它是最后一个元素。

现在，如果你可以控制它，这个javascript片段可以包含在日历js中。它也可以作为单独的文件或现有的自定义JavaScript实用程序集合包含在内。

如果需要，您可以始终跳过文档就绪的包装器，并将代码放在函数中。这样你就可以通过调用一个函数来决定自己何时进行初始化，而不是在加载DOM时自动发生。

设置semantic-ui-calendar一次，以便在多个js文件中多次使用

1 个答案: