Поделиться в соцсетях:

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

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

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

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

Moodle mustache.jsШаблонизатор 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}}, но означает что Вы хотите переписать несколько переменных, заключенных в родительском шаблоне.

Добавить комментарий для Аноним Кликните сюда чтобы отменить ответ ×

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Ждем обратной связи для взаимовыгодного сотрудничества

Наша работа ориентирована на b2b сегмент. Мы стремимся качественно предоставлять весь спектр услуг, связанный с LMS Moodle, чтобы доходы клиентов и их удовлетворенность нашей работой были максимальными. Если у Вас возникли вопросы или предложения — пишите.

Откроется всплывающее окно

Напишите нам
Технологии программирования Moodle: CSS3, AngularJS, Bootstrap

© 2014–2016, ООО «Вебкор». Все права защищены.