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ドキュメントに従ってください。
バンドルによって提供される Flash メッセージ テンプレートを使用する場合は、何も設定する必要はありません。
# 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 -->次の方法を組み合わせることができます。複数のブロックをレンダリングし、複数のブロックを削除し、1 つのリクエスト内に必要なだけ JavaScript コールバックを追加できます。
public function render($view, array $parameters = array(), Response $response = null) Everlution の Ajaxcom バンドルは標準の Symfony のrender()メソッドを拡張しているため、コードベース内でさらに変更を加えることなく Ajaxcom をプロジェクトに統合できます。
render()メソッドは、Ajax 呼び出しに応答するか非 Ajax 呼び出しに応答するかを自動的に決定するため、アプリケーション内で特別なシナリオを処理する必要はありません。
Ajaxcom バンドルは、Ajax リクエストと非 Ajax リクエストによる Symfony コントローラーのアクションを自動的に処理するため、コードを 2 回記述する必要はありません。バンドルは常に同じアクションを呼び出します。
標準の Symfony コントローラーのアクション内では、Ajax リクエストを処理するためのアクションの動作を設定するわずかなオーバーヘッドのみが発生します。オーバーヘッド方法については、次のいくつかのセクションで説明します。
renderAjaxBlock(string $id)ページ上に 1 つのブロックのみを動的にレンダリングするには、次の 2 つの条件を満たす必要があります。
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 のレンダリング後に呼び出される関数の名前で、2 番目はオブジェクトとして関数に渡されるパラメーターの配列です。
例：
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() 2 つの引数で呼び出して、任意の DOM オブジェクトのクラスを簡単に置き換えることができます。1 つ目は選択した CSS セレクター、2 つ目は現在のものと置き換えるクラスです。
doNotChangeUrl() doNotChangeUrl()を呼び出すことで、ターゲット ページの URL の置換を簡単に回避できます。
Flash メッセージは、Ajaxcom バンドルによって自動的に処理されます。リクエストが Ajax 経由で呼び出されると、セッション バッグ内のフラッシュが自動的にレンダリングされます。
提供された小枝テンプレートを小枝レイアウト内のどこかに含める必要があるだけです。
{% include " @EverlutionAjaxcom/flash_message.html.twig " %}コントローラーからaddFlash()呼び出すときは、 EverlutionAjaxcomBundleFlash使用して 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すべてのフォームはデフォルトで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 );
}このようなクラスを作成した後は、twig 内で関数を呼び出すだけです。
{{ 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ブロックを書き直す必要があります。
