meneruskan objek / JSON ke wp_localize_script

15

Saya sudah mendapatkan potongan javascript yang berisi objek literal. Tapi saya perlu melokalkannya, dan saya ingin mencari cara untuk menulis ulang sehingga saya bisa mendapatkan wp_localize_script () untuk mengaksesnya, dan menghasilkan format yang benar.

Versi non-lokal (non dinamis) terlihat seperti ini:

var layoyt_config = {
    'header'        : 1 
,   'footer'        : 1
,   'ls'            : {'sb1':1}
,   'rs'            : {'sb1':1,'sb2':1}
,   'align'         : 'center'
};  

Sekarang, agar nilai-nilai itu dihasilkan oleh php (berdasarkan beberapa wp_settings) Saya ingin menggunakan wp_localize_script, jadi saya bisa mengambilnya dari sana:

var layoyt_config = my_localized_data.layoyt_config;

Dan untuk mendapatkan data itu ke properti objek itu, saya 'berpikir' saya bisa melakukan ini, tetapi jelas tidak:

$data = array(
    'layout_config' => {
        'header' : 1
    ,   'footer' : 1
    ,   'ls' : {'sb1': 1}
    ,    'rs' : {'sb1': 1,'sb2': 1}
    ,    'align' : 'center'
    }
);
wp_localize_script('my-script-handle', 'my_localized_data', $data);

Karena ini akan menyebabkan kesalahan parse PHP, saya telah mencoba menulis ulang sintaks json to array, karena wp_localize_script akan mengubahnya kembali menjadi notasi objek, tetapi ini juga tidak berfungsi untuk saya:

$data = array(
    'layout_config' => array(
        'header' => 1
    ,   'footer' => 1
    ,   'ls' => array('sb1'=>1)
    ,    'rs' => array('sb1'=>1,'sb2'=>1)
    ,    'align' => 'center'
    )
);
wp_localize_script('my-script-handle', 'my_localized_data', $data);

Dan sementara ini berjalan lancar meskipun parser php, saya tidak mendapatkan output yang diharapkan dalam sumber halaman saya, karena my_localized_data.layout_config menjadi String "Array", di sini adalah output:

<script type='text/javascript'>
    /* <![CDATA[ */
    var wpkit_localized_data = {
    layout_config: "Array"
    };
    /* ]]> */
</script>

Jadi .. Bagaimana saya bisa melakukan ini (atau saya hanya harus menerima bahwa saya harus 'meratakan' objek saya menjadi var diskrit seperti:

lc_header = '1';
ls_ls_sb1 = '1';
etc...
mikkelbreum
sumber

Jawaban:

15

Memang, wp_localize_script()sederhana , itu hanya menambahkan tanda kutip di sekitar nilai-nilai dan lolos dari konten, berharap semuanya menjadi string.

Namun, ada l10n_print_afterkunci array, yang akan dicetak tanpa ada gangguan sama sekali. Itu dapat digunakan untuk mengeksekusi kode arbitrer setelah string diteruskan. Anda dapat menggunakannya untuk meneruskan data ekstra Anda.

$data = array(
    'layout_config' => {
      'ls' : {'sb1': 1}
    }
);
$reshuffled_data = array(
    'l10n_print_after' => 'my_localized_data = ' . json_encode( $data ) . ';'
);
wp_localize_script('my-script-handle', 'my_localized_data', $reshuffled_data);

Anda akan berakhir dengan kode seperti ini:

var my_localized_data = {}; // What is left of your array
my_localized_data = {'layout_config': {'ls': {'sb1': 1}}}; // From l10n_print_after
Jan Fabry
sumber
Sangat berguna, walaupun saya pikir maksud Anda adalah titik koma setelah json_encode, bukan koma, apakah saya benar?
kovshenin
1
@kovshenin: Tangkapan bagus! Saya memperbaikinya, tetapi jika Anda akan mengusulkannya sebagai hasil edit, Anda akan mendapatkan +2 perwakilan untuk itu.
Jan Fabry
Jangan bermaksud untuk membajak pertanyaan ini, tetapi diberi pertanyaan / jawaban ini sebagai referensi untuk mencari wordpress.stackexchange.com/questions/53842 (dalam kasus siapa pun yang memiliki petunjuk di sini). Terima kasih!
Zach
1

Penafian - Saya berada di luar jangkauan saya pada hal-hal keamanan JS di sini.

Pertama, untuk mencocokkan output yang Anda inginkan, Anda tidak aktif dengan level bersarang. Nama objek digunakan sebagai parameter dalam panggilan lokal (bukan kunci array):

$data = array(
        'header' => 1
    ,   'footer' => 1
    ,   'ls' => array('sb1'=>1)
    ,    'rs' => array('sb1'=>1,'sb2'=>1)
    ,    'align' => 'center'
);
wp_localize_script('my-script-handle', 'layout_config', $data);

Tapi lsdan rsmasih rusak karena WP_Scripts->print_scripts_l10n()metode tidak menangani kasus ketika variabel adalah array.

Terbaik yang bisa saya lakukan untuk memperbaiki filter berikut ini (seperti di atas - tidak yakin seberapa aman menggunakannya dalam produksi, tetapi untuk memberikan gambaran umum):

add_filter('js_escape','js_escape_nested', 10, 2);

function js_escape_nested($safe_text, $text) {

     if(is_array($text) )
         return str_replace( '"', "'", json_encode ($text) );

     return $safe_text;
}
Jarang
sumber
Saya mengerti bahwa nama objek utama digunakan sebagai parameter 2dn dalam panggilan ke wp_localize_script, tetapi, saya sudah melakukan itu, nama objek lokal saya seharusnya 'my_localized_data', objek itu akan memiliki berbagai properti yang kebanyakan dari mereka memiliki nilai string sederhana, tapi saya perlu salah satu properti ini menjadi objek multi-dimensi.
mikkelbreum
Ini tampaknya keluar dari ruang lingkup wp_localize_script tanpa modifikasi. Itu tidak bisa menangani array multidimensi. Saya sekarang telah datang dengan metode yang berbeda, di mana saya menyimpan obejct multi-dimensi lokal saya sebagai nilai data html- *. Ini berfungsi dengan baik, tetapi tinggalkan pertanyaan tambahan: wordpress.stackexchange.com/questions/8684
mikkelbreum