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 (),
);
// ...
}
// ...
} Installez @everlutionsk/ajaxcom-js via npm et incluez ajaxcom.js à votre mise en page TWIG :
< script type = " text/javascript " src = " {{ asset( ' build/ajaxcom.js ' ) }} " ></ script > La dernière chose que vous devez faire est de fournir un gestionnaire JavaScript dans votre mise en page TWIG - veuillez suivre la documentation @everlutionsk/ajaxcom-js .
Vous n'avez rien à configurer si vous souhaitez utiliser les modèles de messages flash fournis par le bundle.
# 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 Par défaut, AjaxcomBundle ignore les blocs vides et si le développeur demande de restituer un bloc vide, nous filtrons ces instances. Si vous souhaitez restituer le bloc avec un contenu vide, vous devez définir l'indicateur refresh sur true, comme vous pouvez le voir dans l'exemple ci-dessus.
Lorsque vous souhaitez définir l'indicateur d'actualisation à partir du contrôleur, vous devez d'abord ajouter le bloc, puis l'actualiser :
<?php
public function exampleAction ()
{
$ this -> addAjaxBlock ( ' example ' );
$ this -> refreshAjaxBlock ( ' example ' );
return $ this -> render ( ' some/template ' );
}Le bundle fonctionne mieux avec le framework CSS Bootstrap 3+.
Étendez votre contrôleur depuis EverlutionAjaxcomBundleControllerController ou utilisez le trait EverlutionAjaxcomBundleControllerAjaxcomTrait avec votre contrôleur pour obtenir la fonctionnalité Ajaxcom.
Par défaut, la bibliothèque ajaxcom-js gérera tous les clics sur les liens sauf un avec target="_blank" et toutes les soumissions de formulaires. Si vous devez changer de sélecteur ou si vous souhaitez avoir un certain contrôle sur les liens qui sont gérés par ajaxcom-js et ceux qui ne le sont pas, vous pouvez remplacer les sélecteurs par défaut dans l'initialisation ajaxcom-js . Veuillez consulter la documentation @everlutionsk/ajaxcom-js .
Exemple:
< 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 -->Les méthodes suivantes peuvent être combinées - par ex. vous pouvez restituer plusieurs blocs, supprimer plusieurs blocs et ajouter autant de rappels JavaScript que vous le souhaitez dans une même requête.
public function render($view, array $parameters = array(), Response $response = null) Le bundle Ajaxcom d'Everlution étend la méthode render() standard de Symfony afin que vous puissiez intégrer Ajaxcom à votre projet sans aucune autre modification dans votre base de code.
La méthode render() décide automatiquement si elle répond à l'appel Ajax ou non-Ajax, vous n'avez donc pas besoin de gérer des scénarios spéciaux dans votre application.
Le bundle Ajaxcom gérera automatiquement l'action de votre contrôleur Symfony avec les requêtes Ajax et non-Ajax afin que vous n'ayez pas besoin d'écrire votre code deux fois - le bundle appellera toujours la même action.
Dans l'action de votre contrôleur Symfony standard, vous n'aurez qu'une petite surcharge qui configurera le comportement de l'action pour gérer les requêtes Ajax. Les méthodes de surcharge sont expliquées dans les sections suivantes.
renderAjaxBlock(string $id)Afin de restituer dynamiquement un seul bloc sur la page, vous devez remplir les deux conditions suivantes :
block de brindilleblock de brindille est enfermé dans l'élément DOM avec ID qui porte le même nom que le bloc Par défaut, TWIG ne prend pas en charge les traits d'union dans les noms de blocs, donc si vous devez utiliser des traits d'union dans vos identifiants, nous convertissons automatiquement les traits d'union en traits de soulignement pour vous. Par conséquent, vous pouvez utiliser des traits d'union dans vos identifiants avec une combinaison du même nom pour le bloc TWIG - il vous suffit de remplacer les traits d'union par des traits de soulignement. Exemple : id='custom-block' et {% block custom_block %} seront automatiquement mis en correspondance par AjaxcomBundle.
Brindille:
< div id = " list " >
{% block list %}
// this is the HTML which will be replaced/removed ...
{% endblock %}
</ div >PHP :
$ this -> renderAjaxBlock ( " list " ); En action de votre contrôleur, appelez simplement renderAjaxBlock où vous devez fournir l'ID de bloc (par exemple, le nom du bloc TWIG).
Lorsque votre action est appelée via une requête Ajax, la réponse JSON pour la bibliothèque Ajaxcom contiendra des informations sur quel bloc doit être restitué avec quel HTML.
removeAjaxBlock(string $selector) Si vous souhaitez supprimer dynamiquement un élément DOM, par exemple après avoir supprimé une ligne du tableau, vous pouvez utiliser la méthode removeAjaxBlock() où vous fournirez simplement le sélecteur CSS de l'élément que vous souhaitez supprimer.
Brindille:
< 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) " );Le code ci-dessus (les deux exemples) supprimera la ligne du milieu du tableau après l'appel de l'action.
Résultat:
< 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 = []) Vous pouvez ajouter autant de rappels JavaScript que vous le souhaitez. Le premier argument de addCallback() est le nom de la fonction qui doit être appelée après le rendu du HTML, le deuxième est un tableau de paramètres qui sera transmis à la fonction en tant qu'objet.
Exemple:
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
} ;
}
} ; Vous n'avez pas réellement besoin d'utiliser cette fonction si vous écrivez votre JavaScript de la manière suivante :
// additional.js
var App = {
additional : function ( ) {
// some additional functionality
console . log ( 'executing App.additional' ) ;
} ,
// more functions within App namespace
}
App . additional ( ) ; App.additional() sera exécuté chaque fois que le navigateur téléchargera le fichier additional.js , peu importe si la demande est traitée avec ou sans Ajaxcom. Vous devez simplement vous assurer que vous ajoutez le <script src="additional.js"></script> à votre DOM via Ajaxcom là où il est nécessaire.
L'AjaxcomBundle ajoutera automatiquement tous les scripts du bloc javascripts à votre page (ils seront insérés après le dernier <script> dans votre code).
replaceClass() Vous pouvez facilement remplacer la classe dans n'importe quel objet DOM de votre choix en appelant replaceClass() avec deux arguments - le premier est le sélecteur CSS de votre choix et le second est la classe par laquelle vous souhaitez remplacer l'actuel.
doNotChangeUrl() Vous pouvez facilement éviter de remplacer l'URL de la page cible en appelant doNotChangeUrl() .
Les messages flash sont automatiquement gérés par le bundle Ajaxcom. Lorsque la requête est appelée via Ajax, les flashs qui se trouvent dans le sac de session sont rendus automatiquement.
Il vous suffit d'inclure le modèle de brindille fourni quelque part dans votre mise en page de brindille :
{% include " @EverlutionAjaxcom/flash_message.html.twig " %} Lorsque vous appelez addFlash() depuis votre contrôleur, veuillez utiliser EverlutionAjaxcomBundleFlash pour fournir le type de message flash :
$ 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 Tous les formulaires sont gérés par défaut par ajaxcom-js . Vous pouvez modifier ce comportement en remplaçant le sélecteur de formulaires par défaut lors de l'initialisation ajaxcom-js . Veuillez suivre la documentation @everlutionsk/ajaxcom-js .
Afin de réutiliser la source de données entre, par exemple, plusieurs onglets, vous pouvez facilement créer des fonctions Twig en étendant notre BaseDataSource .
Ajoutez simplement à votre services.yml la déclaration suivante :
AppBundleDataProvider :
resource : ' ../../src/AppBundle/DataProvider '
tags : ['twig.extension'] Vous pouvez spécifier n'importe quel dossier de votre projet. Dans cet exemple, nous avons choisi l'espace de noms AppBundleDataProvider .
Chaque classe de cet espace de noms qui étend EverlutionAjaxcomBundleDataSourceBaseDataSource est analysée pour les méthodes publiques avec le suffixe Provider via réflexion et nous créons les fonctions Twig simples à partir de ces méthodes. Voyons l'exemple :
// 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 );
}Après avoir créé une telle classe, vous pouvez simplement appeler la fonction dans Twig :
{{ dump (navigation()); }} {# will dump static array #}
{% for item in userProfile( 2 ) %}
{{ dump ( item ) }}
{% endfor %} Si vous souhaitez utiliser AjaxcomBundle de manière transparente, vous devez copier @EverlutionAjaxcomlayout_bootstrap_4.html.twig dans votre projet (par exemple AppBundle) et le modifier selon vos besoins.
De cette façon, AjaxcomBundle gérera pour vous des tâches telles que le remplacement des JavaScripts, des StyleSheets et des MetaTags.
Lorsque vous utilisez des blocs de @EverlutionAjaxcomlayout_bootstrap_4.html.twig vous devriez être prêt.
Lorsque vous décidez de configurer votre mise en page manuellement, les sections suivantes vous aideront à comprendre comment fonctionne le remplacement automatique.
class='ajaxcom-persistent' (ou tout ce que vous avez défini dans la configuration du bundle){% block javascripts %}{% endblock %}javascripts AjaxcomBundle chargera automatiquement les scripts de ce bloc pour vousclass='ajaxcom-persistent' (ou tout ce que vous avez défini dans la configuration du bundle){% block stylesheets %}{% endblock %}stylesheets , AjaxcomBundle chargera automatiquement les styles de ce bloc pour vousclass='ajaxcom-persistent' (ou tout ce que vous avez défini dans la configuration du bundle){% block metatags %}{% endblock %}metatags AjaxcomBundle chargera automatiquement les balises méta de ce bloc pour voustitle de la page, votre mise en page doit contenir <title>{% block title %}{% endblock %}</title> et vous devez réécrire le bloc title dans le modèle où vous étendez votre modèle principal
