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 via npm e inclua ajaxcom.js em seu layout TWIG:
< script type = " text/javascript " src = " {{ asset( ' build/ajaxcom.js ' ) }} " ></ script > A última coisa que você precisa fazer é fornecer algum manipulador de JavaScript em seu layout TWIG - siga a documentação @everlutionsk/ajaxcom-js .
Você não precisa configurar nada se desejar usar os modelos de mensagens flash fornecidos pelo pacote.
# 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 Por padrão, o AjaxcomBundle ignora blocos que estão vazios e se o desenvolvedor solicitar para renderizar um bloco vazio, filtramos essas instâncias. Caso você queira renderizar novamente o bloco com conteúdo vazio, você deve definir o sinalizador refresh como verdadeiro, como pode ver no exemplo acima.
Quando você deseja definir o sinalizador de atualização do controlador, primeiro você precisa adicionar o bloco e depois atualizá-lo:
<?php
public function exampleAction ()
{
$ this -> addAjaxBlock ( ' example ' );
$ this -> refreshAjaxBlock ( ' example ' );
return $ this -> render ( ' some/template ' );
}O pacote funciona melhor com a estrutura CSS Bootstrap 3+.
Estenda seu controlador de EverlutionAjaxcomBundleControllerController ou use EverlutionAjaxcomBundleControllerAjaxcomTrait trait com seu controlador para obter a funcionalidade do Ajaxcom.
Por padrão, a biblioteca ajaxcom-js irá lidar com todos os cliques em links, exceto um com target="_blank" e todos os envios de formulários. Se você precisar alterar o seletor ou quiser ter algum controle sobre quais links são manipulados pelo ajaxcom-js e quais não são, você pode substituir os seletores padrão na inicialização ajaxcom-js . Consulte a documentação @everlutionsk/ajaxcom-js .
Exemplo:
< 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 -->Os seguintes métodos podem ser combinados - por exemplo. você pode renderizar vários blocos e remover vários blocos e adicionar quantos retornos de chamada JavaScript desejar em uma solicitação.
public function render($view, array $parameters = array(), Response $response = null) O pacote Ajaxcom da Everlution estende o método render() padrão do Symfony para que você possa integrar o Ajaxcom ao seu projeto sem quaisquer alterações adicionais em sua base de código.
O método render() decide automaticamente se está respondendo à chamada Ajax ou não Ajax, para que você não precise lidar com cenários especiais em seu aplicativo.
O pacote Ajaxcom irá lidar com a ação do seu controlador Symfony com solicitações Ajax e não Ajax automaticamente, para que você não precise escrever seu código duas vezes - o pacote sempre chamará a mesma ação.
Dentro da ação padrão do controlador Symfony, você terá apenas uma pequena sobrecarga que configurará o comportamento da ação para lidar com as solicitações Ajax. Os métodos indiretos são explicados nas próximas seções.
renderAjaxBlock(string $id)Para renderizar dinamicamente apenas um bloco na página, você precisa atender a duas condições:
block twigblock twig está incluído no elemento DOM com ID que tem o mesmo nome do bloco Por padrão, o TWIG não suporta hífens em nomes de blocos, portanto, se você precisar usar hífens em seus IDs, converteremos automaticamente hífens em sublinhados para você. Portanto, você pode usar hífens em seus IDs com uma combinação do mesmo nome para o bloco TWIG - você só precisa substituir os hífens por sublinhados. Exemplo: id='custom-block' e {% block custom_block %} serão automaticamente correspondidos pelo AjaxcomBundle.
Galho:
< div id = " list " >
{% block list %}
// this is the HTML which will be replaced/removed ...
{% endblock %}
</ div >PHP:
$ this -> renderAjaxBlock ( " list " ); Na ação do seu controlador, basta chamar renderAjaxBlock onde você precisa fornecer o ID do bloco (por exemplo, nome do bloco TWIG).
Quando sua ação é chamada por meio de solicitação Ajax, a resposta JSON da biblioteca Ajaxcom conterá informações sobre qual bloco deve ser renderizado novamente com qual HTML.
removeAjaxBlock(string $selector) Se você deseja remover algum elemento DOM dinamicamente, por exemplo, após excluir alguma linha da tabela, você pode usar o método removeAjaxBlock() onde você simplesmente fornecerá o seletor CSS do elemento que deseja remover.
Galho:
< 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) " );O código acima (ambos os exemplos) removerá a linha do meio da tabela após a ação ser chamada.
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 = []) Você pode adicionar quantos retornos de chamada JavaScript desejar. O primeiro argumento de addCallback() é o nome da função que deve ser chamada após renderizar o HTML, o segundo é o array de parâmetros que serão passados para a função como um objeto.
Exemplo:
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
} ;
}
} ; Na verdade, você não precisa usar esta função se escrever seu JavaScript da seguinte maneira:
// additional.js
var App = {
additional : function ( ) {
// some additional functionality
console . log ( 'executing App.additional' ) ;
} ,
// more functions within App namespace
}
App . additional ( ) ; O App.additional() será executado toda vez que o navegador baixar o arquivo additional.js - não importa se a solicitação está sendo tratada com ou sem Ajaxcom. Você só precisa ter certeza de que está adicionando o <script src="additional.js"></script> ao seu DOM via Ajaxcom onde for necessário.
O AjaxcomBundle adicionará todos os scripts do bloco javascripts à sua página automaticamente (eles serão inseridos após o último <script> do seu código).
replaceClass() Você pode facilmente substituir a classe em qualquer objeto DOM que desejar invocando replaceClass() com dois argumentos - o primeiro é o seletor CSS de sua escolha e o segundo é a classe pela qual você deseja substituir o atual.
doNotChangeUrl() Você pode facilmente evitar a substituição do URL da página de destino invocando doNotChangeUrl() .
As mensagens flash são tratadas automaticamente pelo pacote Ajaxcom. Quando a solicitação é chamada via Ajax os flashes que estão no saco da sessão são renderizados automaticamente.
Você só precisa incluir o modelo twig fornecido em algum lugar do layout do twig:
{% include " @EverlutionAjaxcom/flash_message.html.twig " %} Ao chamar addFlash() do seu controlador, use EverlutionAjaxcomBundleFlash para fornecer o tipo de mensagem 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 os formulários são gerenciados por padrão por ajaxcom-js . Você pode alterar esse comportamento substituindo o seletor de formulários padrão ao inicializar ajaxcom-js . Siga a documentação @everlutionsk/ajaxcom-js .
Para reutilizar fontes de dados entre, por exemplo, várias guias, você pode facilmente criar funções Twig estendendo nosso BaseDataSource .
Basta adicionar ao seu services.yml a seguinte instrução:
AppBundleDataProvider :
resource : ' ../../src/AppBundle/DataProvider '
tags : ['twig.extension'] Você pode especificar qualquer pasta desejada em seu projeto. Neste exemplo, escolhemos o namespace AppBundleDataProvider .
Cada classe dentro deste namespace que estende EverlutionAjaxcomBundleDataSourceBaseDataSource é verificada em busca de métodos públicos com o sufixo Provider por meio de reflexão e estamos criando funções Twig simples a partir desses métodos. Vejamos o exemplo:
// 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 );
}Depois de criar essa classe você pode simplesmente chamar a função dentro do twig:
{{ dump (navigation()); }} {# will dump static array #}
{% for item in userProfile( 2 ) %}
{{ dump ( item ) }}
{% endfor %} Se você quiser usar o AjaxcomBundle perfeitamente, você deve copiar @EverlutionAjaxcomlayout_bootstrap_4.html.twig para o seu projeto (por exemplo, AppBundle) e modificá-lo de acordo com suas necessidades.
Dessa forma, o AjaxcomBundle cuidará de tarefas como substituição de JavaScripts, StyleSheets e MetaTags para você.
Ao usar blocos de @EverlutionAjaxcomlayout_bootstrap_4.html.twig você deve estar tudo configurado.
Quando você decidir configurar seu layout manualmente, as seções a seguir o ajudarão a entender como funciona a substituição automática.
class='ajaxcom-persistent' (ou qualquer coisa que você tenha definido na configuração do pacote){% block javascripts %}{% endblock %}javascripts o AjaxcomBundle carregará scripts deste bloco automaticamente para vocêclass='ajaxcom-persistent' (ou qualquer coisa que você tenha definido na configuração do pacote){% block stylesheets %}{% endblock %}stylesheets , o AjaxcomBundle carregará os estilos deste bloco automaticamente para vocêclass='ajaxcom-persistent' (ou qualquer coisa que você tenha definido na configuração do pacote){% block metatags %}{% endblock %}metatags o AjaxcomBundle carregará metatags deste bloco automaticamente para vocêtitle da página, seu layout precisa conter <title>{% block title %}{% endblock %}</title> e você precisa reescrever o bloco title dentro do modelo onde você estende seu modelo principal
