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 (),
);
// ...
}
// ...
} npm 을 통해 @everlutionsk/ajaxcom-js 설치하고 TWIG 레이아웃에 ajaxcom.js 포함합니다.
< script type = " text/javascript " src = " {{ asset( ' build/ajaxcom.js ' ) }} " ></ script > 마지막으로 해야 할 일은 TWIG 레이아웃 내에 일부 JavaScript 처리기를 제공하는 것입니다. @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 ' );
}번들은 Bootstrap 3+ CSS 프레임워크에서 가장 잘 작동합니다.
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) Everlution의 Ajaxcom 번들은 표준 Symfony의 render() 메소드를 확장하므로 코드베이스 내에서 추가 변경 없이 Ajaxcom을 프로젝트와 통합할 수 있습니다.
render() 메서드는 Ajax 호출에 응답하는지 또는 Ajax가 아닌 호출에 응답하는지 자동으로 결정하므로 애플리케이션 내에서 특별한 시나리오를 처리할 필요가 없습니다.
Ajaxcom 번들은 Ajax 및 Ajax가 아닌 요청으로 Symfony 컨트롤러의 작업을 자동으로 처리하므로 코드를 두 번 작성할 필요가 없습니다. 번들은 항상 동일한 작업을 호출합니다.
표준 Symfony 컨트롤러의 액션 내에는 Ajax 요청을 처리하기 위한 액션 동작을 설정하는 아주 작은 오버헤드만 있습니다. 오버헤드 방법은 다음 몇 섹션에서 설명됩니다.
renderAjaxBlock(string $id)페이지에서 하나의 블록만 동적으로 렌더링하려면 다음 두 가지 조건을 충족해야 합니다.
block 안에 포함되어 있습니다.block 블록과 이름이 같은 ID 가진 DOM 요소 내에 포함됩니다. 기본적으로 TWIG는 블록 이름에 하이픈을 지원하지 않으므로 ID 내에 하이픈을 사용해야 하는 경우 자동으로 하이픈을 밑줄로 변환합니다. 따라서 TWIG 블록에 대해 동일한 이름을 조합하여 ID 내에서 하이픈을 사용할 수 있습니다. 하이픈을 밑줄로 바꾸면 됩니다. 예: 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 " ); 컨트롤러가 작동할 때 블록 ID(예: TWIG 블록 이름)를 제공해야 하는 renderAjaxBlock 호출하기만 하면 됩니다.
Ajax 요청을 통해 작업이 호출되면 Ajaxcom 라이브러리에 대한 JSON 응답에는 어떤 블록을 어떤 HTML로 다시 렌더링해야 하는지에 대한 정보가 포함됩니다.
removeAjaxBlock(string $selector) 예를 들어 테이블에서 일부 행을 삭제한 후 일부 DOM 요소를 동적으로 제거하려면 제거하려는 요소의 CSS 선택기를 간단히 제공하는 removeAjaxBlock() 메서드를 사용할 수 있습니다.
작은 가지:
< 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() 은 요청이 Ajaxcom을 사용하든 사용하지 않든 상관없이 브라우저가 additional.js 파일을 다운로드할 때마다 실행됩니다. 필요한 곳에 Ajaxcom을 통해 <script src="additional.js"></script> DOM에 추가하고 있는지 확인하기만 하면 됩니다.
AjaxcomBundle은 javascripts 블록 내의 모든 스크립트를 페이지에 자동으로 추가합니다(코드 내의 마지막 <script> 뒤에 삽입됩니다).
replaceClass() 두 개의 인수로 replaceClass() 호출하여 원하는 DOM 객체의 클래스를 쉽게 바꿀 수 있습니다. 첫 번째는 선택한 CSS 선택자이고 두 번째는 현재 항목을 바꾸려는 클래스입니다.
doNotChangeUrl() doNotChangeUrl() 호출하면 대상 페이지의 URL 교체를 쉽게 피할 수 있습니다.
플래시 메시지는 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 문서를 따르세요.
예를 들어 여러 탭 간에 데이터 소스를 재사용하려면 BaseDataSource 확장하여 Twig 기능을 쉽게 만들 수 있습니다.
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, StyleSheets 및 MetaTags 교체와 같은 작업을 처리합니다.
@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 블록을 다시 작성해야 합니다.
