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 (),
);
// ...
}
// ...
} Instale @everlutionsk/ajaxcom-js a través de npm e incluya ajaxcom.js en su diseño TWIG:
< script type = " text/javascript " src = " {{ asset( ' build/ajaxcom.js ' ) }} " ></ script > Lo último que debe hacer es proporcionar algún controlador de JavaScript dentro de su diseño TWIG; siga la documentación de @everlutionsk/ajaxcom-js .
No necesita configurar nada si desea utilizar las plantillas de mensajes flash proporcionadas por el paquete.
# 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 De forma predeterminada, AjaxcomBundle ignora los bloques que están vacíos y, si el desarrollador solicita representar un bloque vacío, filtramos estas instancias. En caso de que desee volver a representar el bloque con contenido vacío, debe configurar el indicador refresh en verdadero, como puede ver en el ejemplo anterior.
Cuando desee configurar el indicador de actualización desde el controlador, primero debe agregar el bloque y luego actualizarlo:
<?php
public function exampleAction ()
{
$ this -> addAjaxBlock ( ' example ' );
$ this -> refreshAjaxBlock ( ' example ' );
return $ this -> render ( ' some/template ' );
}El paquete funciona mejor con el marco CSS Bootstrap 3+.
Amplíe su controlador desde EverlutionAjaxcomBundleControllerController o use el rasgo EverlutionAjaxcomBundleControllerAjaxcomTrait con su controlador para obtener la funcionalidad de Ajaxcom.
De forma predeterminada, la biblioteca ajaxcom-js manejará todos los clics en enlaces excepto uno con target="_blank" y todos los envíos de formularios. Si necesita cambiar el selector o desea tener cierto control sobre qué enlaces maneja ajaxcom-js y cuáles no, puede anular los selectores predeterminados dentro de la inicialización ajaxcom-js . Consulte la documentación de @everlutionsk/ajaxcom-js .
Ejemplo:
< 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 -->Se pueden combinar los siguientes métodos, p. puede representar múltiples bloques y eliminar múltiples bloques y agregar tantas devoluciones de llamada de JavaScript dentro de una solicitud como desee.
public function render($view, array $parameters = array(), Response $response = null) El paquete Ajaxcom de Everlution amplía el método render() estándar de Symfony para que puedas integrar Ajaxcom con tu proyecto sin realizar más cambios en tu código base.
El método render() decide automáticamente si responde a la llamada Ajax o no Ajax, por lo que no necesita manejar escenarios especiales dentro de su aplicación.
El paquete Ajaxcom manejará automáticamente la acción de su controlador Symfony con solicitudes Ajax y no Ajax, por lo que no necesita escribir su código dos veces: el paquete siempre llamará a la misma acción.
Dentro de la acción de su controlador Symfony estándar, tendrá solo una pequeña sobrecarga que configurará el comportamiento de la acción para manejar las solicitudes de Ajax. Los métodos generales se explican en las siguientes secciones.
renderAjaxBlock(string $id)Para representar dinámicamente solo un bloque en la página, debe cumplir las siguientes dos condiciones:
block twigblock de ramita está encerrado dentro del elemento DOM con ID que tiene el mismo nombre que el bloque De forma predeterminada, TWIG no admite guiones en los nombres de los bloques, por lo que si necesita utilizar guiones dentro de sus ID, convertiremos automáticamente los guiones en guiones bajos. Por lo tanto, puede usar guiones dentro de sus ID con una combinación del mismo nombre para el bloque TWIG; solo necesita reemplazar los guiones con guiones bajos. Ejemplo: id='custom-block' y {% block custom_block %} coincidirán automáticamente con AjaxcomBundle.
Ramita:
< div id = " list " >
{% block list %}
// this is the HTML which will be replaced/removed ...
{% endblock %}
</ div >PHP:
$ this -> renderAjaxBlock ( " list " ); En acción de su controlador, simplemente llame renderAjaxBlock donde deberá proporcionar el ID del bloque (por ejemplo, el nombre del bloque TWIG).
Cuando se llama a su acción a través de una solicitud Ajax, la respuesta JSON para la biblioteca Ajaxcom contendrá información sobre qué bloque se debe volver a representar con qué HTML.
removeAjaxBlock(string $selector) Si desea eliminar algún elemento DOM dinámicamente, por ejemplo, después de eliminar alguna fila de la tabla, puede usar el método removeAjaxBlock() donde simplemente proporcionará el selector CSS del elemento que desea eliminar.
Ramita:
< 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) " );El código anterior (ambos ejemplos) eliminará la fila del medio de la tabla después de que se llame a la acción.
Resultado:
< 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 = []) Puede agregar tantas devoluciones de llamada de JavaScript como desee. El primer argumento de addCallback() es el nombre de la función que se debe llamar después de representar el HTML, el segundo es una serie de parámetros que se pasarán a la función como un objeto.
Ejemplo:
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
} ;
}
} ; En realidad, no necesitas usar esta función si escribes tu JavaScript de la siguiente manera:
// additional.js
var App = {
additional : function ( ) {
// some additional functionality
console . log ( 'executing App.additional' ) ;
} ,
// more functions within App namespace
}
App . additional ( ) ; App.additional() se ejecutará cada vez que el navegador descargue el archivo additional.js , sin importar si la solicitud se maneja con o sin Ajaxcom. Solo necesita asegurarse de agregar <script src="additional.js"></script> a su DOM a través de Ajaxcom donde sea necesario.
AjaxcomBundle agregará automáticamente todos los scripts dentro del bloque javascripts a su página (se insertarán después del último <script> dentro de su código).
replaceClass() Puede reemplazar fácilmente la clase en cualquier objeto DOM que desee invocando replaceClass() con dos argumentos: el primero es el selector CSS de su elección y el segundo es la clase con la que desea reemplazar la actual.
doNotChangeUrl() Puede evitar fácilmente reemplazar la URL de la página de destino invocando doNotChangeUrl() .
Los mensajes flash son manejados automáticamente por el paquete Ajaxcom. Cuando la solicitud se llama a través de Ajax, los flashes que están en la bolsa de sesión se procesan automáticamente.
Solo necesita incluir la plantilla twig proporcionada en algún lugar dentro de su diseño de twig:
{% include " @EverlutionAjaxcom/flash_message.html.twig " %} Cuando llame addFlash() desde su controlador, utilice EverlutionAjaxcomBundleFlash para proporcionar el tipo de mensaje 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 Todos los formularios son manejados de forma predeterminada por ajaxcom-js . Puede cambiar este comportamiento anulando el selector de formularios predeterminado al inicializar ajaxcom-js . Siga la documentación de @everlutionsk/ajaxcom-js .
Para reutilizar la fuente de datos entre, por ejemplo, varias pestañas, puede crear fácilmente funciones Twig ampliando nuestro BaseDataSource .
Simplemente agregue a su services.yml la siguiente declaración:
AppBundleDataProvider :
resource : ' ../../src/AppBundle/DataProvider '
tags : ['twig.extension'] Puede especificar cualquier carpeta dentro de su proyecto que desee. En este ejemplo, hemos elegido el espacio de nombres AppBundleDataProvider .
Cada clase dentro de este espacio de nombres que extiende EverlutionAjaxcomBundleDataSourceBaseDataSource se analiza en busca de métodos públicos con sufijo Provider mediante reflexión y estamos creando funciones Twig simples a partir de estos métodos. Veamos el ejemplo:
// 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 );
}Después de crear dicha clase, simplemente puedes llamar a la función dentro de twig:
{{ dump (navigation()); }} {# will dump static array #}
{% for item in userProfile( 2 ) %}
{{ dump ( item ) }}
{% endfor %} Si desea utilizar AjaxcomBundle sin problemas, debe copiar @EverlutionAjaxcomlayout_bootstrap_4.html.twig a su proyecto (por ejemplo, AppBundle) y modificarlo según sus necesidades.
De esta manera, AjaxcomBundle se encargará de tareas como reemplazar JavaScripts, StyleSheets y MetaTags por usted.
Cuando utilices bloques de @EverlutionAjaxcomlayout_bootstrap_4.html.twig deberías estar todo configurado.
Cuando decida configurar su diseño manualmente, las siguientes secciones le ayudarán a comprender cómo funciona el reemplazo automático.
class='ajaxcom-persistent' (o cualquier cosa que haya configurado en la configuración del paquete){% block javascripts %}{% endblock %}javascripts AjaxcomBundle cargará los scripts de este bloque automáticamente para usted.class='ajaxcom-persistent' (o cualquier cosa que haya configurado en la configuración del paquete){% block stylesheets %}{% endblock %}stylesheets , AjaxcomBundle cargará estilos de este bloque automáticamente para ustedclass='ajaxcom-persistent' (o cualquier cosa que haya configurado en la configuración del paquete){% block metatags %}{% endblock %}metatags AjaxcomBundle cargará metaetiquetas de este bloque automáticamente para ustedtitle de la página, su diseño debe contener <title>{% block title %}{% endblock %}</title> y debe reescribir el bloque title dentro de la plantilla donde extiende su plantilla principal.
