ajaxcom bundle套裝下載 - ajaxcom bundle包原始碼下載

ajaxcom bundle

其他類別

v3.0.1 twig

下載

Everlution Ajaxcom 捆綁包

安裝

第 1 步：下載捆綁包

$ composer require everlutionsk/ajaxcom-bundle

第 2 步：啟用捆綁包

 <?php
// app/AppKernel.php

// ...
class AppKernel extends Kernel
{
    public function registerBundles ()
    {
        $ bundles = array (
            // ...

            new Everlution  AjaxcomBundle  EverlutionAjaxcomBundle (),
        );

        // ...
    }

    // ...
}

第 3 步：在 TWIG 版面配置中包含 Ajaxcom 函式庫 JavasSript

透過npm安裝@everlutionsk/ajaxcom-js並將ajaxcom.js包含到您的 TWIG 佈局中：

< 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 處理，您可以在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 捆綁包將自動處理您的 Symfony 控制器的 Ajax 和非 Ajax 請求操作，因此您無需編寫兩次程式碼 - 該捆綁包將始終調用相同的操作。

在標準 Symfony 控制器的操作中，您只需很小的開銷即可設定操作的行為來處理 Ajax 請求。接下來的幾節將解釋開銷方法。

`renderAjaxBlock(string $id)`

為了在頁面上僅動態渲染一個區塊，您需要滿足以下兩個條件：

您要渲染的區塊包含在樹枝block中
twig block包含在 DOM 元素中，其ID與該區塊同名

預設情況下，TWIG 不支援區塊名稱中的連字符，因此如果您需要在 ID 中使用連字符，我們會自動將連字符轉換為下劃線。因此，您可以在 ID 中使用連字符以及 TWIG 區塊的相同名稱的組合 - 只需將連字符替換為下劃線即可。範例： 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 " );

在控制器的操作中，只需呼叫renderAjaxBlock ，您需要在其中提供區塊 ID（例如 TWIG 區塊名稱）。

當透過 Ajax 請求呼叫您的操作時，Ajaxcom 程式庫的 JSON 回應將包含有關應使用哪個 HTML 重新呈現哪個區塊的資訊。

`removeAjaxBlock(string $selector)`

如果您想要動態刪除某些 DOM 元素，例如從表中刪除某些行後，您可以使用removeAjaxBlock()方法，您只需提供要刪除的元素的 CSS 選擇器即可。

例子：

枝條：

< 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 ( ) ;

每次瀏覽器下載additional.js檔案時， App.additional()都會被執行－無論是否使用Ajaxcom 處理請求。您只需要確保透過 Ajaxcom 將<script src="additional.js"></script>新增到需要的 DOM 中。

AjaxcomBundle 會自動將javascripts區塊中的所有腳本新增到您的頁面（它們將插入到程式碼中最後一個<script>之後）。

`replaceClass()`

您可以透過使用兩個參數呼叫replaceClass()來輕鬆替換任何您想要的DOM物件中的類別 - 第一個是您選擇的CSS選擇器，第二個是您想要替換目前選擇器的類別。

`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 傳送表單

預設情況下，所有表單均由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 等任務。

使用自動替換 JS、CSS、Meta 和 Title

當您使用@EverlutionAjaxcomlayout_bootstrap_4.html.twig中的區塊時，您應該已完成所有設定。

當您決定手動設定佈局時，以下部分將幫助您了解自動替換的工作原理。

替換 JavaScript

每個頁面上應包含的所有 JavaScript 都需要包含class='ajaxcom-persistent' （或您在捆綁包配置中設定的任何內容）
您要擴充的主佈局必須包含{% block javascripts %}{% endblock %}
當您擴展主佈局並重寫javascripts區塊時，AjaxcomBundle 會自動為您載入此區塊中的腳本

替換樣式表

與 JavaScript 相同，每個頁面上應包含的所有樣式表都需要包含class='ajaxcom-persistent' （或您在捆綁包配置中設定的任何內容）
您要擴充的主佈局必須包含{% block stylesheets %}{% endblock %}
當您擴展主佈局並重寫stylesheets塊時，AjaxcomBundle 會自動為您載入此區塊中的樣式

替換元標籤和標題

每個頁面上應該出現的所有元標記都需要包含class='ajaxcom-persistent' （或您在捆綁包配置中設定的任何內容）
您要擴充的主佈局必須包含{% block metatags %}{% endblock %}
當您擴展主佈局並重寫metatags區塊時，AjaxcomBundle 會自動為您載入此區塊中的元標記
如果您想更改頁面title ，您的版面需要包含<title>{% block title %}{% endblock %}</title>並且您需要在擴充主範本的範本中重寫title區塊