JavaScript Notes

Описание

В системе используется Twitter Bootstrap, который позволяет достаточно быстро разрабатывать прототипы интерфейсов, идеально подходит для интерфейсов панели администратора.

Так же в системе используется RequireJS для организации AMD

Настройки

Глобальных настроек нет

Использование

В довесок к Twiter Boostrap и RequireJS в системе есть еще пару хаков:

• ссылка с классом confirm запросит подтверждение перехода по указанному URL, в качестве текста будет использоваться data-confirm атрибут, можно совмещать с классом ajax
• ссылка с классом ajax будет стучаться по указанному URL посредством XMLHttpRequest:
  • в довесок к URL будут собраны все данные из data (т.е. data-id="2" эквивалентно ?id=2)
  • можно указать метод доставки, используя атрибут data-ajax-method, по умолчанию - POST
  • можно указать тип ожидаемых данных - data-ajax-type, по умолчанию - JSON
• форма с классом ajax будет отправлена посредством XMLHttpRequest по указанному в action URL
  • можно указать метод доставки используя атрибут method, по умолчанию - GET
  • можно указать тип ожидаемых данных - data-ajax-type, по умолчанию - JSON
• элемент с классом load подгружает HTML контент со страницы указанной в атрибуте href или data-ajax-source в элемент по селектору указанному в атрибуте data-ajax-target
  • можно указать метод доставки - data-ajax-method
• элемент с классом modal открывает модальный диалог, контент которого в формате HTML будет доставлен посредством XMLHttpRequest

<a class="ajax" href="/get">Click Me!</a>
<a class="confirm" href="/delete" data-id="42" data-confirm="Are you sure?">Click Me!</a>
<a class="ajax confirm" href="/delete" data-id="42">Click Me!</a>

<a class="dialog" href="/dialog">Click Me!</a>

<div class="load" data-source="/get/five" data-ajax-target="#load">
   <div id="load">...</load>
</div>

<form class="ajax" action="/save/" method="post">
   ...
</form>

Со стороны сервера передача данных не требует от нас чего-либо экстраординарного:

<?php
return
function() use ($view) {
    $view->test = 123;
}

Как и при работе с обычными контроллерами, мы можем использовать пакет Messages:

<?php
return
function() use ($view) {
    $this->getMessages()->addNotice('Notice Text');
    $this->getMessages()->addSuccess('Success Text');
    $this->getMessages()->addError('Error Text');
}

Есть так же отслеживание ключевого слова callback, что позволяет выполнять какие-либо функции уже на стороне браузера:

<?php
return
function() use ($view) {
    /** @var View $view */
    $view->callback = 'callback_function_name'; // call custom function
    $view->callback = 'bluz.validate.notices';  // call function by AMD
}

Или даже перезагрузить текущую страницу:

<?php
return
function() {
    $this->reload():
}

Или отправить куда-нибудь:

<?php
return
function() {
    $this->redirect("http://google.com"):
}

Так же есть возможность указать каким образом будут отправлены данные на сервер (имеется ввиду HTTP метод передачи):

<a href="/delete" class="ajax confirm" data-id="42" data-method="DELETE" title="Are you sure?">Click Me!</a>

Размышления

Все ajax запросы отправляются посредством POST, необходимо добавить обработку data параметра data-ajax-method. Так же надо бы предусмотреть удобное добавление кастомного обработчика ответа сервера, опять идём к data - data-ajax-callback Ещё есть мысль перевесить управление с классов на data-spy (по аналогии с Twitter Bootstrap)? Но тут я вижу сразу два недостатка, которые есть в самом Bootstrap:

• обработчики вешаются независимо на data-spy[scroll] и data-spy[affix]
• нет возможности использовать их одновременно для одного элемента

Думаю было бы правильно, чтобы был следующий функционал (где-то должен быть уже реализован, нутром чую), начну с HTML:

<div data-helper="ajax confirm"></div>

Далее должна быть регистрация хэлперов в JavaScript:

$.helper.register('ajax', { 'click': function(element){/*click logic*/} } );
$.helper.register('confirm', { 'click': function(element){/*click logic*/} } );

И собственно инициализация обработчика:

$(body).on('click.bluz.helper', '[data-bluz-helper]', function(){
    var helpers = $(this).data('bluz-helper').split(' ');
    var chain = null;
    for (helperName in helpers) {
        if ($.helper.isRegistered(helperName )) {
            var helper = $.helper.get(helperName);
            if (helper.click) {
                chain = helper.click(this, chain); // or use apply?
                if (false === chain) return;
            }
        }
    }
});