ContextQMD
Back to Moodle

Moodle JavaScript

public/admin/tool/componentlibrary/content/library/moodle-javascript.md

5.2.01.0 KB
Original Source

Running AMD modules

When using this (shortcode) syntax you can showcase your HTML and add some RequireJS style Javascript that will call core AMD modules.

In order for this to work you need to use the JavaScript syntax used in core Mustache templates. See the {{js}} tags in this example below:

{{< example >}}

<div id="toasttest" role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false"> <div class="toast-header"> 
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ms-2 mb-1 btn-close" data-dismiss="toast" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>
</div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> {{#js}} require( [ 'theme_boost/toast', ], function( Toast ) { const toastTrigger = document.getElementById('toasttest'); new Toast(toastTrigger).show(); }); {{/js}} {{< /example >}}