ajaxcom bundle
v3.0.1 twig
$ composer require everlutionsk/ajaxcom-bundle <?php
// app/AppKernel.php
// ...
class AppKernel extends Kernel
{
public function registerBundles ()
{
$ bundles = array (
// ...
new Everlution AjaxcomBundle EverlutionAjaxcomBundle (),
);
// ...
}
// ...
} Установите @everlutionsk/ajaxcom-js через npm и включите ajaxcom.js в свой макет TWIG:
< script type = " text/javascript " src = " {{ asset( ' build/ajaxcom.js ' ) }} " ></ script > Последнее, что вам нужно сделать, это предоставить некоторый обработчик JavaScript в вашем макете TWIG — следуйте документации @everlutionsk/ajaxcom-js .
Вам не нужно ничего настраивать, если вы хотите использовать шаблоны флэш-сообщений, предоставляемые пакетом.
# all configuration is optional - following values are default
everlution_ajaxcom :
flash_template : @EverlutionAjaxcom/flash_message.html.twig
flash_block_id : flash_message
persistent_class : ajaxcom-persistent
blocks_to_render : # default value is empty array - when you provide this value, AjaxcomBundle will automatically render these blocks within each AJAX request
- id : ' content '
- id : ' navigation '
- id : ' flash_message '
refresh : true По умолчанию AjaxcomBundle игнорирует пустые блоки, и если разработчик просит отобразить пустой блок, мы отфильтровываем эти экземпляры. Если вы хотите повторно отобразить блок с пустым содержимым, вам следует установить флаг refresh в значение true, как вы можете видеть в примере выше.
Если вы хотите установить флаг обновления с контроллера, вам нужно сначала добавить блок, а затем обновить его:
<?php
public function exampleAction ()
{
$ this -> addAjaxBlock ( ' example ' );
$ this -> refreshAjaxBlock ( ' example ' );
return $ this -> render ( ' some/template ' );
}Пакет лучше всего работает с CSS-фреймворком Bootstrap 3+.
Расширьте свой контроллер из EverlutionAjaxcomBundleControllerController или используйте черту EverlutionAjaxcomBundleControllerAjaxcomTrait с вашим контроллером, чтобы получить функциональность Ajaxcom.
По умолчанию библиотека ajaxcom-js обрабатывает все клики по ссылкам, кроме одного с target="_blank" и всех отправок форм. Если вам нужно изменить селектор или вы хотите иметь некоторый контроль над тем, какие ссылки обрабатываются ajaxcom-js , а какие нет, вы можете переопределить селекторы по умолчанию при инициализации ajaxcom-js . Пожалуйста, ознакомьтесь с документацией @everlutionsk/ajaxcom-js .
Пример:
< a href = " https://www.google.com " >External link</ a > <!-- won't be handled by Ajaxcom -->
< a href = " {{ path( ' remove_user ' ) }} " >Remove user</ a > <!-- will be handled by Ajaxcom -->Следующие методы могут быть объединены - например. вы можете отображать несколько блоков, удалять несколько блоков и добавлять столько обратных вызовов JavaScript в одном запросе, сколько пожелаете.
public function render($view, array $parameters = array(), Response $response = null) Пакет Ajaxcom от Everlution расширяет стандартный метод render() Symfony, поэтому вы можете интегрировать Ajaxcom с вашим проектом без каких-либо дальнейших изменений в вашей кодовой базе.
Метод render() автоматически решает, отвечает ли он на вызов Ajax или не Ajax, поэтому вам не нужно обрабатывать специальные сценарии в вашем приложении.
Пакет Ajaxcom будет автоматически обрабатывать действия вашего контроллера Symfony с помощью Ajax- и не-Ajax-запросов, поэтому вам не нужно писать код дважды — пакет всегда будет вызывать одно и то же действие.
В рамках действия вашего стандартного контроллера Symfony у вас будут лишь небольшие накладные расходы, которые будут настраивать поведение действия для обработки запросов Ajax. Методы накладных расходов описаны в следующих нескольких разделах.
renderAjaxBlock(string $id)Чтобы динамически отображать только один блок на странице, вам необходимо выполнить следующие два условия:
block веткиblock ветки заключен в элемент DOM с ID , имеющим то же имя, что и блок По умолчанию TWIG не поддерживает дефисы в именах блоков, поэтому, если вам нужно использовать дефисы в ваших идентификаторах, мы автоматически преобразуем дефисы в символы подчеркивания. Следовательно, вы можете использовать дефисы в своих идентификаторах с одноимённой комбинацией для блока TWIG — вам просто нужно заменить дефисы символами подчеркивания. Пример: id='custom-block' и {% block custom_block %} будут автоматически сопоставлены AjaxcomBundle.
Ветка:
< div id = " list " >
{% block list %}
// this is the HTML which will be replaced/removed ...
{% endblock %}
</ div >PHP:
$ this -> renderAjaxBlock ( " list " ); В действии вашего контроллера просто вызовите renderAjaxBlock , где вам нужно указать идентификатор блока (например, имя блока TWIG).
Когда ваше действие вызывается через запрос Ajax, ответ JSON для библиотеки Ajaxcom будет содержать информацию о том, какой блок и какой HTML следует повторно отобразить.
removeAjaxBlock(string $selector) Если вы хотите динамически удалить какой-либо элемент DOM, например, после удаления какой-либо строки из таблицы, вы можете использовать метод removeAjaxBlock() , где вы просто предоставляете CSS-селектор элемента, который вы хотите удалить.
Ветка:
< table >
< tbody >
< tr id = " row-1 " >< td >1.</ td ></ tr >
< tr id = " row-2 " >< td >2.</ td ></ tr >
< tr id = " row-3 " >< td >3.</ td ></ tr >
</ tbody >
</ table >PHP:
$ this -> removeBlock ( " #row-2 " );
// OR you can use any CSS selector
$ this -> removeBlock ( " tr:nth-child(2) " );Приведенный выше код (оба примера) удалит среднюю строку из таблицы после вызова действия.
Результат:
< table >
< tbody >
< tr id = " row-1 " >< td >1.</ td ></ tr >
<!-- the #row-2 has been removed -->
< tr id = " row-3 " >< td >3.</ td ></ tr >
</ tbody >
</ table >addCallback(string $function, array $parameters = []) Вы можете добавить столько обратных вызовов JavaScript, сколько пожелаете. Первый аргумент addCallback() — это имя функции, которую следует вызвать после рендеринга HTML, второй — массив параметров, которые будут переданы функции как объект.
Пример:
PHP:
$ this -> addCallback ( ' Table.init ' , [ ' some ' => ' data ' , ' other ' => [ ' data ' , ' etc ' ]]); var Table = function ( ) {
return {
init : function ( data ) {
var some = data . some ;
var otherArray = data . other ;
// initialize table with provided data
} ;
}
} ; На самом деле вам не нужно использовать эту функцию, если вы пишете свой JavaScript следующим образом:
// additional.js
var App = {
additional : function ( ) {
// some additional functionality
console . log ( 'executing App.additional' ) ;
} ,
// more functions within App namespace
}
App . additional ( ) ; App.additional() будет выполняться каждый раз, когда браузер загружает файл additional.js — независимо от того, обрабатывается ли запрос с помощью Ajaxcom или без него. Вам просто нужно убедиться, что вы добавляете <script src="additional.js"></script> в свой DOM через Ajaxcom там, где это необходимо.
AjaxcomBundle автоматически добавит все скрипты из блока javascripts на вашу страницу (они будут вставлены после последнего <script> в вашем коде).
replaceClass() Вы можете легко заменить класс в любом объекте DOM, вызвав replaceClass() с двумя аргументами: первый — это селектор CSS по вашему выбору, а второй — класс, которым вы хотите заменить текущий.
doNotChangeUrl() Вы можете легко избежать замены URL-адреса целевой страницы, вызвав doNotChangeUrl() .
Флэш-сообщения автоматически обрабатываются пакетом Ajaxcom. При вызове запроса через Ajax флэши, находящиеся в пакете сеансов, рендерятся автоматически.
Вам нужно только включить предоставленный шаблон ветки где-нибудь в макете ветки:
{% include " @EverlutionAjaxcom/flash_message.html.twig " %} Когда вы вызываете addFlash() со своего контроллера, используйте EverlutionAjaxcomBundleFlash чтобы указать тип флэш-сообщения:
$ this -> addFlash ( Everlution AjaxcomBundle Flash:: SUCCESS , ' Your request has been successfully handled by Ajaxcom bundle ' );
// you can use following constants:
// EverlutionAjaxcomBundleFlash::SUCCESS
// EverlutionAjaxcomBundleFlash::ERROR
// EverlutionAjaxcomBundleFlash::WARNING
// EverlutionAjaxcomBundleFlash::INFO Все формы по умолчанию обрабатываются ajaxcom-js . Вы можете изменить это поведение, переопределив селектор форм по умолчанию при инициализации ajaxcom-js . Пожалуйста, следуйте документации @everlutionsk/ajaxcom-js .
Чтобы повторно использовать источник данных, например, между несколькими вкладками, вы можете легко создать функции Twig, расширив наш BaseDataSource .
Просто добавьте в свой файл Services.yml следующее утверждение:
AppBundleDataProvider :
resource : ' ../../src/AppBundle/DataProvider '
tags : ['twig.extension'] Вы можете указать любую папку внутри вашего проекта. В этом примере мы выбрали пространство имен AppBundleDataProvider .
Каждый класс в этом пространстве имен, который расширяет EverlutionAjaxcomBundleDataSourceBaseDataSource сканируется на наличие общедоступных методов с суффиксом Provider посредством отражения, и мы создаем простые функции Twig из этих методов. Давайте посмотрим пример:
// AppBundleDataProviderExample.php
// simple function which returns static array
public function navigationProvider () {
return [
// some data...
];
}
// you can use parametrical functions and injected services as well
public function userProfileProvider ( int $ id ) {
return $ this -> someService -> getData ( $ id );
}После создания такого класса вы можете просто вызвать функцию внутри ветки:
{{ dump (navigation()); }} {# will dump static array #}
{% for item in userProfile( 2 ) %}
{{ dump ( item ) }}
{% endfor %} Если вы хотите беспрепятственно использовать AjaxcomBundle, вам следует скопировать @EverlutionAjaxcomlayout_bootstrap_4.html.twig в свой проект (например, AppBundle) и изменить его в соответствии со своими потребностями.
Таким образом, AjaxcomBundle будет выполнять за вас такие задачи, как замена JavaScript, таблиц стилей и метатегов.
Когда вы используете блоки из @EverlutionAjaxcomlayout_bootstrap_4.html.twig у вас все должно быть настроено.
Если вы решите настроить макет вручную, следующие разделы помогут вам понять, как работает автоматическая замена.
class='ajaxcom-persistent' (или что-нибудь, что вы установили в конфигурации пакета){% block javascripts %}{% endblock %}javascripts AjaxcomBundle автоматически загрузит для вас скрипты из этого блока.class='ajaxcom-persistent' (или все, что вы установили в конфигурации пакета){% block stylesheets %}{% endblock %}stylesheets AjaxcomBundle автоматически загрузит для вас стили из этого блока.class='ajaxcom-persistent' (или что-нибудь, что вы установили в конфигурации пакета){% block metatags %}{% endblock %}metatags AjaxcomBundle автоматически загрузит метатеги из этого блока для вас.title страницы, ваш макет должен содержать <title>{% block title %}{% endblock %}</title> и вам нужно переписать title внутри шаблона, в котором вы расширяете свой основной шаблон
