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 (),
);
// ...
}
// ...
} Installieren Sie @everlutionsk/ajaxcom-js über npm und fügen Sie ajaxcom.js in Ihr TWIG-Layout ein:
< script type = " text/javascript " src = " {{ asset( ' build/ajaxcom.js ' ) }} " ></ script > Als letztes müssen Sie einen JavaScript-Handler in Ihrem TWIG-Layout bereitstellen – folgen Sie bitte der Dokumentation von @everlutionsk/ajaxcom-js .
Sie müssen nichts konfigurieren, wenn Sie die im Bundle bereitgestellten Flash-Nachrichtenvorlagen verwenden möchten.
# 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 Standardmäßig ignoriert AjaxcomBundle leere Blöcke und wenn der Entwickler fragt, ob er einen leeren Block rendern möchte, filtern wir diese Instanzen heraus. Falls Sie den Block mit leerem Inhalt erneut rendern möchten, sollten Sie das refresh auf „True“ setzen, wie Sie im obigen Beispiel sehen können.
Wenn Sie das Aktualisierungsflag vom Controller aus festlegen möchten, müssen Sie zuerst den Block hinzufügen und ihn dann aktualisieren:
<?php
public function exampleAction ()
{
$ this -> addAjaxBlock ( ' example ' );
$ this -> refreshAjaxBlock ( ' example ' );
return $ this -> render ( ' some/template ' );
}Das Bundle funktioniert am besten mit dem CSS-Framework Bootstrap 3+.
Erweitern Sie Ihren Controller von EverlutionAjaxcomBundleControllerController oder verwenden Sie die Eigenschaft EverlutionAjaxcomBundleControllerAjaxcomTrait mit Ihrem Controller, um Ajaxcom-Funktionalität zu erhalten.
Standardmäßig verarbeitet die Bibliothek ajaxcom-js alle Linkklicks außer einem mit target="_blank" und allen Formularübermittlungen. Wenn Sie den Selektor ändern müssen oder eine gewisse Kontrolle darüber haben möchten, welche Links von ajaxcom-js verarbeitet werden und welche nicht, können Sie die Standardselektoren bei der Initialisierung ajaxcom-js überschreiben. Bitte sehen Sie sich die Dokumentation @everlutionsk/ajaxcom-js an.
Beispiel:
< 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 -->Die folgenden Methoden können kombiniert werden – z. Sie können mehrere Blöcke rendern und mehrere Blöcke entfernen und so viele JavaScript-Rückrufe innerhalb einer Anfrage hinzufügen, wie Sie möchten.
public function render($view, array $parameters = array(), Response $response = null) Das Ajaxcom-Bundle von Everlution erweitert die standardmäßige render() Methode von Symfony, sodass Sie Ajaxcom ohne weitere Änderungen in Ihrer Codebasis in Ihr Projekt integrieren können.
Die render() Methode entscheidet automatisch, ob sie auf den Ajax- oder Nicht-Ajax-Aufruf reagiert, sodass Sie sich nicht mit speziellen Szenarien in Ihrer Anwendung befassen müssen.
Das Ajaxcom-Bundle verarbeitet die Aktionen Ihres Symfony-Controllers mit Ajax- und Nicht-Ajax-Anfragen automatisch, sodass Sie Ihren Code nicht zweimal schreiben müssen – das Bundle ruft immer dieselbe Aktion auf.
Innerhalb der Aktion Ihres Standard-Symfony-Controllers haben Sie nur einen geringen Overhead, der das Verhalten der Aktion für die Verarbeitung der Ajax-Anfragen einrichtet. Die Overhead-Methoden werden in den nächsten Abschnitten erläutert.
renderAjaxBlock(string $id)Um nur einen Block auf der Seite dynamisch zu rendern, müssen Sie die folgenden zwei Bedingungen erfüllen:
block eingeschlossenblock ist in einem DOM-Element mit ID eingeschlossen, die denselben Namen wie der Block hat Standardmäßig unterstützt TWIG keine Bindestriche in Blocknamen. Wenn Sie also Bindestriche in Ihren IDs verwenden müssen, konvertieren wir Bindestriche automatisch für Sie in Unterstriche. Daher können Sie in Ihren IDs Bindestriche mit einer Kombination aus demselben Namen für den TWIG-Block verwenden – Sie müssen lediglich die Bindestriche durch Unterstriche ersetzen. Beispiel: id='custom-block' und {% block custom_block %} werden automatisch von AjaxcomBundle abgeglichen.
Zweig:
< div id = " list " >
{% block list %}
// this is the HTML which will be replaced/removed ...
{% endblock %}
</ div >PHP:
$ this -> renderAjaxBlock ( " list " ); Rufen Sie in Aktion Ihres Controllers einfach renderAjaxBlock auf, wo Sie die Block-ID (z. B. TWIG-Blockname) angeben müssen.
Wenn Ihre Aktion über eine Ajax-Anfrage aufgerufen wird, enthält die JSON-Antwort für die Ajaxcom-Bibliothek Informationen darüber, welcher Block mit welchem HTML neu gerendert werden soll.
removeAjaxBlock(string $selector) Wenn Sie ein DOM-Element dynamisch entfernen möchten, beispielsweise nachdem Sie eine Zeile aus der Tabelle gelöscht haben, können Sie die Methode removeAjaxBlock() verwenden, bei der Sie einfach einen CSS-Selektor für das Element bereitstellen, das Sie entfernen möchten.
Zweig:
< 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) " );Der obige Code (beide Beispiele) entfernt die mittlere Zeile aus der Tabelle, nachdem die Aktion aufgerufen wurde.
Ergebnis:
< 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 = []) Sie können beliebig viele JavaScript-Rückrufe hinzufügen. Das erste Argument von addCallback() ist der Name der Funktion, die nach dem Rendern des HTML aufgerufen werden soll, das zweite ist ein Array von Parametern, die als Objekt an die Funktion übergeben werden.
Beispiel:
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
} ;
}
} ; Sie müssen diese Funktion eigentlich nicht verwenden, wenn Sie Ihr JavaScript folgendermaßen schreiben würden:
// additional.js
var App = {
additional : function ( ) {
// some additional functionality
console . log ( 'executing App.additional' ) ;
} ,
// more functions within App namespace
}
App . additional ( ) ; Die App.additional() wird jedes Mal ausgeführt, wenn der Browser die Datei additional.js herunterlädt – unabhängig davon, ob die Anfrage mit oder ohne Ajaxcom bearbeitet wird. Sie müssen lediglich sicherstellen, dass Sie das <script src="additional.js"></script> über Ajaxcom zu Ihrem DOM hinzufügen, wo es benötigt wird.
Das AjaxcomBundle fügt alle Skripte im javascripts Block automatisch zu Ihrer Seite hinzu (sie werden nach dem letzten <script> in Ihrem Code eingefügt).
replaceClass() Sie können die Klasse in jedem gewünschten DOM-Objekt einfach ersetzen, indem Sie replaceClass() mit zwei Argumenten aufrufen – erstens ist der CSS-Selektor Ihrer Wahl und zweitens ist die Klasse, durch die Sie die aktuelle ersetzen möchten.
doNotChangeUrl() Sie können das Ersetzen der URL der Zielseite leicht vermeiden, indem Sie doNotChangeUrl() aufrufen.
Die Flash-Nachrichten werden automatisch vom Ajaxcom-Bundle verarbeitet. Wenn die Anfrage über Ajax aufgerufen wird, werden die Flashes, die sich in der Sitzungstasche befinden, automatisch gerendert.
Sie müssen lediglich die bereitgestellte Twig-Vorlage irgendwo in Ihr Twig-Layout einfügen:
{% include " @EverlutionAjaxcom/flash_message.html.twig " %} Wenn Sie addFlash() von Ihrem Controller aus aufrufen, verwenden Sie bitte EverlutionAjaxcomBundleFlash um den Flash-Nachrichtentyp bereitzustellen:
$ 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 Alle Formulare werden standardmäßig von ajaxcom-js verarbeitet. Sie können dieses Verhalten ändern, indem Sie beim Initialisieren ajaxcom-js den Standardformularselektor überschreiben. Bitte folgen Sie der Dokumentation @everlutionsk/ajaxcom-js .
Um die Datenquelle beispielsweise zwischen mehreren Registerkarten wiederzuverwenden, können Sie ganz einfach Twig-Funktionen erstellen, indem Sie unsere BaseDataSource erweitern.
Fügen Sie einfach die folgende Anweisung zu Ihrer Datei „services.yml“ hinzu:
AppBundleDataProvider :
resource : ' ../../src/AppBundle/DataProvider '
tags : ['twig.extension'] Sie können einen beliebigen Ordner innerhalb Ihres Projekts angeben. In diesem Beispiel haben wir den Namespace AppBundleDataProvider ausgewählt.
Jede Klasse in diesem Namespace, die EverlutionAjaxcomBundleDataSourceBaseDataSource erweitert, wird per Reflexion nach öffentlichen Methoden mit dem Suffix Provider durchsucht und wir erstellen aus diesen Methoden die einfachen Twig-Funktionen. Sehen wir uns das Beispiel an:
// 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 );
}Nachdem Sie eine solche Klasse erstellt haben, können Sie die Funktion einfach in Twig aufrufen:
{{ dump (navigation()); }} {# will dump static array #}
{% for item in userProfile( 2 ) %}
{{ dump ( item ) }}
{% endfor %} Wenn Sie AjaxcomBundle nahtlos verwenden möchten, sollten Sie @EverlutionAjaxcomlayout_bootstrap_4.html.twig in Ihr Projekt (z. B. AppBundle) kopieren und es an Ihre Bedürfnisse anpassen.
Auf diese Weise übernimmt das AjaxcomBundle Aufgaben wie das Ersetzen von JavaScripts, StyleSheets und MetaTags für Sie.
Wenn Sie Blöcke von @EverlutionAjaxcomlayout_bootstrap_4.html.twig verwenden, sollten Sie alles eingerichtet haben.
Wenn Sie sich entscheiden, Ihr Layout manuell einzurichten, helfen Ihnen die folgenden Abschnitte zu verstehen, wie die automatische Ersetzung funktioniert.
class='ajaxcom-persistent' enthalten (oder alles, was Sie in der Bundle-Konfiguration festgelegt haben).{% block javascripts %}{% endblock %} enthalten.javascripts Block neu schreiben, lädt AjaxcomBundle automatisch Skripte aus diesem Block für Sieclass='ajaxcom-persistent' (oder alles, was Sie in der Bundle-Konfiguration festgelegt haben) enthalten.{% block stylesheets %}{% endblock %} enthalten.stylesheets Block neu schreiben, lädt AjaxcomBundle automatisch Stile aus diesem Block für Sieclass='ajaxcom-persistent' enthalten (oder alles, was Sie in der Bundle-Konfiguration festgelegt haben).{% block metatags %}{% endblock %} enthalten.metatags Block neu schreiben, lädt AjaxcomBundle automatisch Meta-Tags aus diesem Block für Sietitle der Seite ändern möchten, muss Ihr Layout <title>{% block title %}{% endblock %}</title> enthalten und Sie müssen title innerhalb der Vorlage umschreiben, in der Sie Ihre Hauptvorlage erweitern
