Share and be happy!

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

jQuery integration at Moodle 2.9 via Require.jsNow, 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 at MoodleMustache 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:

  1. {{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>
    
  2. {{{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>
    
  3. {{#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 the get_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}}/>
      
  4. {{^lemmings}} its ok, condition processed {{/lemmings}} — equivalent handler conditional “if-not”, without processing else
  5. {{> pacman }} — partial block. The template can include other patterns using this tag
  6. {{$blockvar}} ... {{/blockvar}} — block variable defines a section in the template, which may be overwritted in other mustache-pattern (such as iteration while {{#lemmings}})
  7. {{< template_name}} ... {{/template_name}} — is identical to {{$blockvar}}, but it means that you want to overwrite a number of variables in the parent template
Comments 3
  • 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

Leave a Reply to LMS Service Click here to cancel the reply ×

Your email address will not be published. Required fields are marked *

Waiting feedback for mutually beneficial cooperation

Our services are b2b-oriented. We strive for high-quality Moodle services supply as it leads to higher income and satisfaction of our clients. If you have any questions or desires, please contact us.

A pop-up window

Contact us
Programming technologies Moodle: CSS3, AngularJS, Bootstrap

© 2014–2016, «LMS-Service». All rights reserved.