ajaxcom bundle

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: รวมไลบรารี Ajaxcom JavasSript ไว้ในเค้าโครง TWIG ของคุณ

ติดตั้ง @everlutionsk/ajaxcom-js ผ่าน npm และรวม ajaxcom.js ไว้ในเค้าโครง TWIG ของคุณ:

< script type = " text/javascript " src = " {{ asset( ' build/ajaxcom.js ' ) }} " ></ script >

สิ่งสุดท้ายที่คุณต้องทำคือจัดเตรียมตัวจัดการ JavaScript ภายในเค้าโครง TWIG ของคุณ - โปรดปฏิบัติตามเอกสาร @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 เป็นจริงเหมือนที่คุณเห็นในตัวอย่างด้านบน

เมื่อคุณต้องการตั้งค่าสถานะการรีเฟรชจากคอนโทรลเลอร์ คุณต้องเพิ่มบล็อกก่อนแล้วจึงรีเฟรช:

 <?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)

ชุด Ajaxcom ของ Everlution ขยายวิธี render() มาตรฐานของ Symfony เพื่อให้คุณสามารถรวม Ajaxcom เข้ากับโปรเจ็กต์ของคุณโดยไม่มีการเปลี่ยนแปลงเพิ่มเติมภายในโค้ดเบสของคุณ

เมธอด render() จะตัดสินใจโดยอัตโนมัติว่าจะตอบสนองต่อการเรียก Ajax หรือไม่ใช่ Ajax ดังนั้นคุณจึงไม่จำเป็นต้องจัดการกับสถานการณ์พิเศษภายในแอปพลิเคชันของคุณ

บันเดิล Ajaxcom จะจัดการการทำงานของคอนโทรลเลอร์ Symfony ของคุณด้วยคำขอ Ajax และที่ไม่ใช่ Ajax โดยอัตโนมัติ ดังนั้นคุณไม่จำเป็นต้องเขียนโค้ดซ้ำสองครั้ง บันเดิลจะเรียกใช้การกระทำเดียวกันเสมอ

ภายในการดำเนินการของคอนโทรลเลอร์ Symfony มาตรฐานของคุณ คุณจะมีค่าใช้จ่ายเพียงเล็กน้อยเท่านั้น ซึ่งจะตั้งค่าพฤติกรรมของการดำเนินการเพื่อจัดการคำขอ Ajax วิธีการเหนือศีรษะจะอธิบายไว้ในหัวข้อถัดไป

renderAjaxBlock(string $id)

เพื่อที่จะเรนเดอร์เพียงบล็อกเดียวบนเพจแบบไดนามิก คุณต้องปฏิบัติตามเงื่อนไขสองประการต่อไปนี้:

1. บล็อกที่คุณต้องการเรนเดอร์นั้นอยู่ภายใน block ทวิก
2. 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 โดยที่คุณต้องระบุรหัสบล็อก (เช่น ชื่อบล็อก TWIG)

เมื่อการกระทำของคุณถูกเรียกผ่าน Ajax คำขอการตอบสนอง JSON สำหรับไลบรารี Ajaxcom จะมีข้อมูลเกี่ยวกับบล็อกที่ควรแสดงผลอีกครั้งด้วย 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 ( ) ;

App.additional() จะถูกดำเนินการทุกครั้งที่เบราว์เซอร์ดาวน์โหลดไฟล์ additional.js .js ไม่ว่าคำขอจะได้รับการจัดการโดยมีหรือไม่มี Ajaxcom ก็ตาม คุณเพียงแค่ต้องตรวจสอบให้แน่ใจว่าคุณกำลังเพิ่ม <script src="additional.js"></script> ลงใน DOM ของคุณผ่าน Ajaxcom ในกรณีที่จำเป็น

AjaxcomBundle จะเพิ่มสคริปต์ทั้งหมดภายในบล็อก javascripts ลงในเพจของคุณโดยอัตโนมัติ (จะถูกแทรกไว้หลัง <script> สุดท้ายภายในโค้ดของคุณ)

replaceClass()

คุณสามารถแทนที่คลาสในอ็อบเจ็กต์ DOM ใดๆ ที่คุณต้องการได้อย่างง่ายดายโดยการเรียกใช้ replaceClass() ด้วยอาร์กิวเมนต์สองตัว อย่างแรกคือตัวเลือก CSS ที่คุณเลือก และตัวที่สองคือคลาสที่คุณต้องการแทนที่อันปัจจุบันด้วย

doNotChangeUrl()

คุณสามารถหลีกเลี่ยงการแทนที่ url ของหน้าเป้าหมายได้อย่างง่ายดายโดยการเรียกใช้ doNotChangeUrl()

ข้อความแฟลช

ข้อความแฟลชได้รับการจัดการโดยอัตโนมัติโดยชุด 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

แบบฟอร์มทั้งหมดได้รับการจัดการโดยค่าเริ่มต้นโดย ajaxcom-js คุณสามารถเปลี่ยนลักษณะการทำงานนี้ได้โดยการแทนที่ตัวเลือกแบบฟอร์มเริ่มต้นขณะเริ่มต้น ajaxcom-js โปรดปฏิบัติตามเอกสาร @everlutionsk/ajaxcom-js

การใช้แหล่งข้อมูลซ้ำ

เพื่อที่จะใช้แหล่งข้อมูลซ้ำระหว่างหลายแท็บเช่น คุณสามารถสร้างฟังก์ชัน Twig ได้อย่างง่ายดายโดยขยาย BaseDataSource ของเรา

เพียงเพิ่มคำสั่งต่อไปนี้ลงใน 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 ให้กับคุณ

ใช้การแทนที่ JS, CSS, Meta และ Title โดยอัตโนมัติ

เมื่อคุณใช้บล็อกจาก @EverlutionAjaxcomlayout_bootstrap_4.html.twig คุณควรตั้งค่าทั้งหมดแล้ว

เมื่อคุณตัดสินใจที่จะตั้งค่าเค้าโครงของคุณด้วยตนเอง การปฏิบัติตามส่วนต่างๆ จะช่วยให้คุณเข้าใจวิธีการทำงานของการเปลี่ยนอัตโนมัติ

แทนที่จาวาสคริปต์

1. JavaScript ทั้งหมดที่ควรรวมไว้ในทุกหน้าจะต้องมี class='ajaxcom-persistent' (หรือสิ่งที่คุณได้ตั้งค่าไว้ภายในการกำหนดค่าของบันเดิล)
2. รูปแบบหลักของคุณที่คุณกำลังขยายจะต้องมี {% block javascripts %}{% endblock %}
3. เมื่อคุณขยายเค้าโครงหลักของคุณและคุณกำลังเขียนบล็อก javascripts ใหม่ AjaxcomBundle จะโหลดสคริปต์จากบล็อกนี้ให้คุณโดยอัตโนมัติ

แทนที่ StyleSheets

1. เช่นเดียวกับ JavaScript StyleSheets ทั้งหมดที่ควรรวมไว้ในทุกหน้าจะต้องมี class='ajaxcom-persistent' (หรืออะไรก็ตามที่คุณได้ตั้งค่าไว้ภายในการกำหนดค่าของบันเดิล)
2. รูปแบบหลักของคุณที่คุณกำลังขยายจะต้องมี {% block stylesheets %}{% endblock %}
3. เมื่อคุณขยายเค้าโครงหลักของคุณและคุณกำลังเขียนบล็อก stylesheets ใหม่ AjaxcomBundle จะโหลดสไตล์จากบล็อกนี้ให้คุณโดยอัตโนมัติ

แทนที่เมตาแท็กและชื่อเรื่อง

1. เมตาแท็กทั้งหมดที่ควรปรากฏในทุกหน้าจะต้องมี class='ajaxcom-persistent' (หรือสิ่งที่คุณได้ตั้งค่าไว้ภายในการกำหนดค่าบันเดิล)
2. รูปแบบหลักของคุณที่คุณกำลังขยายจะต้องมี {% block metatags %}{% endblock %}
3. เมื่อคุณขยายเค้าโครงหลักของคุณและคุณกำลังเขียนบล็อก metatags ใหม่ AjaxcomBundle จะโหลดเมตาแท็กจากบล็อกนี้ให้คุณโดยอัตโนมัติ
4. หากคุณต้องการเปลี่ยน title หน้า เลย์เอาต์ของคุณต้องมี <title>{% block title %}{% endblock %}</title> และคุณต้องเขียนบล็อก title ใหม่ภายในเทมเพลตที่คุณขยายเทมเพลตหลักของคุณ

สิ่งที่ต้องทำ

• เพิ่มตัวอย่างการใช้งานที่ซับซ้อน