Unduh ajaxcom bundle - unduh kode sumber ajaxcom bundle

ajaxcom bundle

Kategori lainnya

v3.0.1 twig

Unduh

Paket Everlution Ajaxcom

Instalasi

Langkah 1: Unduh Bundel

$ composer require everlutionsk/ajaxcom-bundle

Langkah 2: Aktifkan Bundel

 <?php
// app/AppKernel.php

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

            new Everlution  AjaxcomBundle  EverlutionAjaxcomBundle (),
        );

        // ...
    }

    // ...
}

Langkah 3: Sertakan perpustakaan Ajaxcom JavasSript dalam tata letak TWIG Anda

Instal @everlutionsk/ajaxcom-js melalui npm dan sertakan ajaxcom.js ke tata letak TWIG Anda:

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

Hal terakhir yang perlu Anda lakukan adalah menyediakan beberapa pengendali JavaScript dalam tata letak TWIG Anda - silakan ikuti dokumentasi @everlutionsk/ajaxcom-js .

Konfigurasi

Anda tidak perlu mengkonfigurasi apa pun jika ingin menggunakan templat pesan flash yang disediakan oleh bundel.

 # 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

Secara default AjaxcomBundle mengabaikan blok yang kosong dan jika pengembang meminta untuk merender blok kosong, kami memfilter instance ini. Jika Anda ingin merender ulang blok dengan konten kosong, Anda harus menyetel tanda refresh ke true seperti yang Anda lihat pada contoh di atas.

Saat Anda ingin menyetel bendera penyegaran dari pengontrol, Anda perlu menambahkan blok terlebih dahulu lalu menyegarkannya:

 <?php

public function exampleAction ()
{
    $ this -> addAjaxBlock ( ' example ' );
    $ this -> refreshAjaxBlock ( ' example ' );
    
    return $ this -> render ( ' some/template ' );
}

Bundel ini berfungsi paling baik dengan kerangka Bootstrap 3+ CSS.

Penggunaan

Perluas pengontrol Anda dari EverlutionAjaxcomBundleControllerController atau gunakan sifat EverlutionAjaxcomBundleControllerAjaxcomTrait dengan pengontrol Anda untuk mendapatkan fungsionalitas Ajaxcom.

Secara default, perpustakaan ajaxcom-js akan menangani semua klik tautan kecuali satu dengan target="_blank" dan semua pengiriman formulir. Jika Anda perlu mengubah pemilih atau ingin memiliki kendali atas tautan mana yang ditangani oleh ajaxcom-js dan mana yang tidak, Anda dapat mengganti pemilih default dalam inisialisasi ajaxcom-js . Silakan lihat dokumentasi @everlutionsk/ajaxcom-js .

Contoh:

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

Metode berikut dapat digabungkan - misalnya. Anda dapat merender beberapa blok dan menghapus beberapa blok serta menambahkan panggilan balik JavaScript sebanyak yang Anda inginkan dalam satu permintaan.

`public function render($view, array $parameters = array(), Response $response = null)`

Bundel Ajaxcom Everlution memperluas metode render() standar Symfony sehingga Anda dapat mengintegrasikan Ajaxcom dengan proyek Anda tanpa perubahan lebih lanjut dalam basis kode Anda.

Metode render() secara otomatis memutuskan apakah metode tersebut merespons panggilan Ajax atau non-Ajax sehingga Anda tidak perlu menangani skenario khusus dalam aplikasi Anda.

Bundel Ajaxcom akan menangani tindakan pengontrol Symfony Anda dengan permintaan Ajax dan non-Ajax secara otomatis sehingga Anda tidak perlu menulis kode dua kali - bundel akan selalu memanggil tindakan yang sama.

Dalam tindakan pengontrol Symfony standar Anda, Anda hanya akan memiliki sedikit overhead yang akan mengatur perilaku tindakan untuk menangani permintaan Ajax. Metode overhead dijelaskan dalam beberapa bagian berikutnya.

`renderAjaxBlock(string $id)`

Untuk merender secara dinamis hanya satu blok pada halaman, Anda harus memenuhi dua kondisi berikut:

blok yang ingin Anda render terlampir di dalam block ranting
block ranting diapit dalam elemen DOM dengan ID yang memiliki nama yang sama dengan blok tersebut

Secara default, TWIG tidak mendukung tanda hubung dalam nama blok, jadi jika Anda perlu menggunakan tanda hubung dalam ID Anda, kami secara otomatis mengonversi tanda hubung menjadi garis bawah untuk Anda. Oleh karena itu Anda dapat menggunakan tanda hubung dalam ID Anda dengan kombinasi nama yang sama untuk blok TWIG - Anda hanya perlu mengganti tanda hubung dengan garis bawah. Contoh: id='custom-block' dan {% block custom_block %} akan otomatis dicocokkan oleh AjaxcomBundle.

Contoh:

Ranting:

< div id = " list " >
    {% block list %}
        // this is the HTML which will be replaced/removed ...
    {% endblock %}
</ div >

PHP:

 $ this -> renderAjaxBlock ( " list " );

Saat pengontrol Anda beraksi, cukup panggil renderAjaxBlock di mana Anda perlu memberikan ID blok (mis. Nama blok TWIG).

Ketika tindakan Anda dipanggil melalui permintaan Ajax, respons JSON untuk perpustakaan Ajaxcom akan berisi informasi tentang blok mana yang harus dirender ulang dengan HTML yang mana.

`removeAjaxBlock(string $selector)`

Jika Anda ingin menghapus beberapa elemen DOM secara dinamis misalnya setelah menghapus beberapa baris dari tabel, Anda dapat menggunakan metode removeAjaxBlock() di mana Anda cukup menyediakan pemilih CSS dari elemen yang ingin Anda hapus.

Contoh:

Ranting:

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

Kode di atas (kedua contoh) akan menghapus baris tengah dari tabel setelah tindakan dipanggil.

Hasil:

< 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 = [])`

Anda dapat menambahkan callback JavaScript sebanyak yang Anda inginkan. Argumen pertama addCallback() adalah nama fungsi yang harus dipanggil setelah merender HTML, argumen kedua adalah array parameter yang akan diteruskan ke fungsi sebagai objek.

Contoh:

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
        } ;
    }
} ;

Anda tidak perlu menggunakan fungsi ini

Anda sebenarnya tidak perlu menggunakan fungsi ini jika Anda ingin menulis JavaScript dengan cara berikut:

 // additional.js
var App = {
    additional : function ( ) {
        // some additional functionality
        console . log ( 'executing App.additional' ) ;
    } ,
    // more functions within App namespace
}

App . additional ( ) ;

App.additional() akan dieksekusi setiap kali browser mengunduh file additional.js - tidak peduli apakah permintaan ditangani dengan atau tanpa Ajaxcom. Anda hanya perlu memastikan bahwa Anda menambahkan <script src="additional.js"></script> ke DOM Anda melalui Ajaxcom jika diperlukan.

AjaxcomBundle akan menambahkan semua skrip dalam blok javascripts ke halaman Anda secara otomatis (mereka akan disisipkan setelah <script> terakhir dalam kode Anda).

`replaceClass()`

Anda dapat dengan mudah mengganti kelas di objek DOM apa pun yang Anda inginkan dengan memanggil replaceClass() dengan dua argumen - pertama adalah pemilih CSS pilihan Anda dan kedua adalah kelas yang ingin Anda ganti dengan kelas saat ini.

`doNotChangeUrl()`

Anda dapat dengan mudah menghindari penggantian url halaman target dengan menerapkan doNotChangeUrl() .

Pesan kilat

Pesan flash secara otomatis ditangani oleh bundel Ajaxcom. Ketika permintaan dipanggil melalui Ajax, flash yang ada di tas sesi dirender secara otomatis.

Anda hanya perlu memasukkan templat ranting yang disediakan di suatu tempat dalam tata letak ranting Anda:

{% include " @EverlutionAjaxcom/flash_message.html.twig " %}

Saat Anda memanggil addFlash() dari pengontrol Anda, gunakan EverlutionAjaxcomBundleFlash untuk memberikan jenis pesan 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

Mengirim formulir melalui Ajaxcom

Semua formulir secara default ditangani oleh ajaxcom-js . Anda dapat mengubah perilaku ini dengan mengganti pemilih formulir default saat menginisialisasi ajaxcom-js . Silakan ikuti dokumentasi @everlutionsk/ajaxcom-js .

Menggunakan kembali sumber data

Untuk menggunakan kembali sumber data misalnya di antara beberapa tab, Anda dapat dengan mudah membuat fungsi Twig dengan memperluas BaseDataSource kami.

Cukup tambahkan pernyataan berikut ke services.yml Anda:

    AppBundleDataProvider :
        resource : ' ../../src/AppBundle/DataProvider '
        tags : ['twig.extension']

Anda dapat menentukan folder mana pun dalam proyek yang Anda inginkan. Dalam contoh ini kita telah memilih namespace AppBundleDataProvider .

Setiap kelas dalam namespace ini yang memperluas EverlutionAjaxcomBundleDataSourceBaseDataSource dipindai untuk metode publik dengan akhiran Provider melalui refleksi dan kami membuat fungsi Ranting sederhana dari metode ini. Mari kita lihat contohnya:

 // 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 );
}

Setelah membuat kelas seperti itu, Anda cukup memanggil fungsi di dalamranting:

{{ dump (navigation()); }} {# will dump static array #}

{% for item in userProfile( 2 ) %}
   {{ dump ( item ) }}
{% endfor %}

Praktik terbaik

Jika Anda ingin menggunakan AjaxcomBundle dengan lancar, Anda harus menyalin @EverlutionAjaxcomlayout_bootstrap_4.html.twig ke proyek Anda (mis. AppBundle) dan memodifikasinya sesuai kebutuhan Anda.

Dengan cara ini AjaxcomBundle akan menangani tugas-tugas seperti mengganti JavaScript, StyleSheets, dan MetaTags untuk Anda.

Gunakan penggantian otomatis JS, CSS, Meta dan Judul

Saat Anda menggunakan blok dari @EverlutionAjaxcomlayout_bootstrap_4.html.twig Anda seharusnya sudah siap.

Saat Anda memutuskan untuk mengatur tata letak secara manual, bagian berikut akan membantu Anda memahami cara kerja penggantian otomatis.

menggantikan JavaScript

semua JavaScript yang harus disertakan pada setiap halaman harus mengandung class='ajaxcom-persistent' (atau apa pun yang telah Anda atur dalam konfigurasi bundel)
tata letak utama yang Anda perluas harus berisi {% block javascripts %}{% endblock %}
ketika Anda memperluas tata letak utama dan menulis ulang blok javascripts AjaxcomBundle akan memuat skrip dari blok ini secara otomatis untuk Anda

menggantikan StyleSheet

sama seperti JavaScript, semua StyleSheet yang harus disertakan pada setiap halaman harus berisi class='ajaxcom-persistent' (atau apa pun yang telah Anda atur dalam konfigurasi bundel)
tata letak utama yang Anda perluas harus berisi {% block stylesheets %}{% endblock %}
ketika Anda memperluas tata letak utama dan menulis ulang blok stylesheets AjaxcomBundle akan memuat gaya dari blok ini secara otomatis untuk Anda

mengganti meta tag dan judul

semua tag meta yang harus ada di setiap halaman harus mengandung class='ajaxcom-persistent' (atau apa pun yang telah Anda atur dalam konfigurasi bundel)
tata letak utama yang Anda perluas harus berisi {% block metatags %}{% endblock %}
ketika Anda memperluas tata letak utama dan menulis ulang blok metatags AjaxcomBundle akan memuat tag meta dari blok ini secara otomatis untuk Anda
jika Anda ingin mengubah title halaman, tata letak Anda harus berisi <title>{% block title %}{% endblock %}</title> dan Anda perlu menulis ulang blok title di dalam template tempat Anda memperluas template utama Anda