From the beginning of first Moodle versions, developers have the basis frontend-framework YUI (Yahoo User Interface), but it was not so good solution for third-party developers because of low popularity/community and complexity hardly use the one, so they didn’t use YUI at own Moodle plugins and themes development and uses jQuery. Fortunately or not, at August 28, 2014 YUI development team announced about stopping project support. In a few days was immediately opened Moodle forum discussion about the future of the frontend system without YUI, but clear results are unclear so far (proposed options React, AngularJS, MooTools etc).
While the spring Moodle upgrade to version 2.9, jQuery has been finally and fully integrated «at the core» via require.js, also there was implemented support about Mustache template engine. But all in order.
Fully jQuery integration via requirejs
Now, the library is loaded asynchronously via requirejs on your site. But it is worth considering that working with jQuery only through the requirejs module, ie do not write native js-code. Let’s look at a simple example of writing and proper jQuery-code for Moodle 2.9+:
require(['jquery'], function( $ ) { $('h2').hide('fast'); });
jQuery integration while Moodle module/plugin development
For example, we need to write a jQuery-handler for our plugin at mod/assign/amd/test.js
define(['jquery'], function($) { return { get: function() { return $('h2').html(); } } });
Now we include the handler functional
require(['mod_assign/test'], function(test) { console.log(test.get()); });
Mustache template engine
Mustache template engine works like all the templating js-through braces, namely two opening and two closing curly brackets, for example {{tag}}
. But there are also other types of variables in Mustache, here’s the whole list:
{{raiden}}
— a simple variable. Template engine looks for a variable with a name between brackets at the current context (and any parent contexts) and while detection a value of the whole tag will be replaced with a variable (its HTML entities). Example:<h3>{{recipename}}</h3> <p>{{description}}</p>
{{{galaga}}}
— variable in a triple braces is not escaped, but instead is replaced by the contents of the variable «as is». This is useful when a variable contains, for example, HTML-block. Example:<a href="#">{{{ name }}}</a>
{{#lemmings}} processing {{/lemmings}}
— the data section with the opening and closing tags. If the lemming-variables contains and check values as “not false”, then the value of the variable will be analyzed and included in the result, and if the variable does not exist or it is false — processing will be performed. If lemming-variable is an array, then the section will be processed each iteration. It is worth noting that this type of tag has predefined semantic tags-helpers:{{#js}}...{{/js}}
,{{#str}}...{{/str}}
,{{#pix}}...{{/pix}}
. Examples:{{#str}} iscool, mod_cool, Barack Obama {{/str}}
equivalent
get_string('iscool', 'mod_cool', 'Barack Obama');
In this case, the third option is equivalent to the variable$a
from theget_string
{{#pix}} t/edit, core, Edit Barack Obama {{/pix}}
equivalent
$OUTPUT->pix_url('t/edit', 'core', 'Edit Barack Obama');
{{#js}} require('jquery', function($) { $('#myslider').slideUp(); }); {{/js}}
{ "attributes": [ { "name": "src", "value": "https://lms-service.org/wp-content/themes/lms/images/logo.png" }, { "name": "class", "value": "somelmsclass" } ] }
<img {{#attributes}}{{name}}="{{value}}" {{/attributes}}/>
{{^lemmings}} its ok, condition processed {{/lemmings}}
— equivalent handler conditional “if-not”, without processing else{{> pacman }}
— partial block. The template can include other patterns using this tag{{$blockvar}} ... {{/blockvar}}
— block variable defines a section in the template, which may be overwritted in other mustache-pattern (such as iteration while{{#lemmings}}
){{< template_name}} ... {{/template_name}}
— is identical to{{$blockvar}}
, but it means that you want to overwrite a number of variables in the parent template
Seth
AMD require.js modules are very useful for plugins frontend development! Thank you for the article
Stefan
What if i want to make a module for question/type/mytype ?
Should i call it with:
require(['question_type_mytype/test'], function(test) {
console.log(test.get());
});
LMS Service
Hu, Stefan! Yes, the code is right, but i need more info about your issue