Работа с jQuery и Mustache в Moodle 2.9

Почти с самого появления Moodle, разработчики взяли за основу frontend-фреймворк YUI (Yahoo User Interface), и как оказалось это было довольно спорное решение: сторонние разработчики в силу крайне малой распространенности и сложности YUI почти не использовали его, подключая, в основном, jQuery при разработке шаблонов и плагинов. К счастью или нет, 28 августа 2014 года команда разработки YUI объявила об остановке поддержки проекта и тут же был открыта дискуссия на форуме Moodle о будущем фронтенда системы без YUI, но к чему в итоге пришли — остается неясно до сих пор (предлагались варианты React, AngularJS, MooTools итп).

При весеннем обновлении Moodle до версии 2.9, наконец-то, jQuery был интегрирован «на уровне ядра», а также была внедрена поддержка шаблонизатора mustache. Но все по порядку.

Полная интеграция jQuery через require.js

Теперь библиотека асинхронно подгружается через require.js на Вашем сайте. Правда стоит учесть, что работать с jQuery через модуль require.js, т.е. не писать нативный js-код. Давайте рассмотрим простой и правильный пример написания jQuery-кода для Moodle 2.9+:

require(['jquery'], function( $ ) {
    $('h1').hide('slow');
});

Интеграция jQuery при разработке модуля для Moodle

Например, нам необходимо написать jQuery-обработчик для нашего плагина по адресу mod/assign/amd/test.js

define(['jquery'], function($) {
    return {
        get: function() {
            return $('h1').text();
        }
    }
});

Теперь мы подключаем функционал обработчика

require(['mod_assign/test'], function(test) {
    console.log(test.get());
});

Шаблонизатор Mustache

Шаблонизатор Mustache работает как и все js-шаблонизаторы через фигурные скобки, а именно через две открывающие и две закрывающие фигурные скобки, например {{tag}}. Но существуют также другие виды переменных в Mustache, вот весь список:

1. {{raiden}} — это простая переменная. Шаблонизатор производит поиск переменной с именем между скобок в текущем контексте (и любых родительских контекстах) и при обнаружении значения, весь тег будет заменен переменной (ее HTML сущностью). Пример:

   <h3>{{recipename}}</h3>
   <p>{{description}}</p>
   

2. {{{galaga}}} — переменная в тройных фигурных скобках не экранируется, вместо этого содержание переменной заменяется «как есть». Это полезно когда переменная содержит, например, HTML-блок. Пример:

   <a href="#">{{{ name }}}</a>
   

3. {{#lemmings}} обработка {{/lemmings}} — секция с данными с открывающим и закрывающим тегами. Если переменные-лемминги содержат и проверяют значения как «не ложные», то значение переменной будет проанализировано и включено в результат, а если переменная не существует или она ложная (false) — обработка производиться не будет. Если лемминг-переменная это массив, то секция будет обрабатывать каждую итерацию. Стоит обратить внимание что у данного типа тегов есть предопределенные смысловые теги-хелперы: {{#js}}...{{/js}}, {{#str}}...{{/str}}, {{#pix}}...{{/pix}}. Примеры:

   • {{#str}} iscool, mod_cool, Barack Obama {{/str}}

     эквивалент get_string('iscool', 'mod_cool', 'Barack Obama'); В данном случае, третий параметр эквивалентен переменной $a у get_string

   • {{#pix}} t/edit, core, Edit Barack Obama {{/pix}}

     эквивалент $OUTPUT->pix_url('t/edit', 'core', 'Barack Obama');

   • {{#js}}
     require('jquery', function($) {
         $('#myslide').slideDown();
     });
     {{/js}}
     

   • {
       "attributes": [
         { "name": "src", "value": "https://lmstech.ru/wp-content/themes/lms/images/logo.png" },
         { "name": "class", "value": "someclass" }
       ]
     }
     

     <img {{#attributes}}{{name}}="{{value}}" {{/attributes}}/>
     

4. {{^lemmings}} все ок, условие выполнилось {{/lemmings}} — эквивалент условного обработчика «if-not», без обработки else.
5. {{> pacman }} — включаемый блок. Шаблон может подключать другие шаблоны используя этот тег.
6. {{$blockvar}} ... {{/blockvar}} — блочная переменная, определяет секцию в шаблоне, которая может быть переписана в другом mustache-шаблоне (например при итерации по {{#lemmings}}).
7. {{< template_name}} ... {{/template_name}} — это идентично {{$blockvar}}, но означает что Вы хотите переписать несколько переменных, заключенных в родительском шаблоне.