ส่งผ่าน object / JSON ไปที่ wp_localize_script

ฉันมีจาวาสคริปต์ที่มีวัตถุตามตัวอักษร แต่ฉันต้อง จำกัด มันและฉันพยายามหาวิธีเขียนมันใหม่เพื่อที่ฉันจะได้รับ wp_localize_script () เพื่อรับมันและออกรูปแบบที่ถูกต้อง

รุ่นที่ไม่ใช่ภาษาท้องถิ่น (ไม่ใช่ไดนามิก) มีลักษณะดังนี้:

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

ตอนนี้เพื่อให้มีค่าเหล่านั้นที่สร้างขึ้นโดย php (ขึ้นอยู่กับบาง wp_settings) ฉันต้องการใช้ wp_localize_script ดังนั้นฉันสามารถเอามันจากที่นั่น:

var layoyt_config = my_localized_data.layoyt_config;

และเพื่อให้ได้ข้อมูลนั้นไปยังคุณสมบัติของวัตถุนั้นฉัน 'คิด' ฉันสามารถทำสิ่งนี้ได้ แต่ไม่ชัดเจน:

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

เช่นนี้จะทำให้เกิดข้อผิดพลาดในการแยกวิเคราะห์ PHP ฉันพยายามที่จะเขียน json เพื่ออาเรย์ไวยากรณ์เนื่องจาก wp_localize_script จะแปลงที่กลับไปเป็นสัญกรณ์วัตถุ แต่สิ่งนี้ไม่ได้สำหรับฉัน:

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

และในขณะที่มันทำงานได้อย่างราบรื่นเมื่อ php parser ฉันไม่ได้รับผลลัพธ์ที่คาดหวังในแหล่งที่มาของหน้าของฉันเป็น my_localized_data.layout_config กลายเป็นสตริง "Array" นี่คือผลลัพธ์:

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

ดังนั้น .. ฉันจะทำสิ่งนี้ได้อย่างไร (หรือฉันต้องยอมรับว่าฉันจะต้อง 'แผ่' วัตถุของฉันลงใน vars แบบแยกเช่น:

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

แท้จริงแล้วwp_localize_script()มันง่ายเพียงแค่เพิ่มเครื่องหมายคำพูดล้อมรอบคุณค่าและหลบหนีเนื้อหาโดยคาดว่าทั้งหมดจะเป็นสตริง

อย่างไรก็ตามมีl10n_print_afterคีย์ของอาร์เรย์ซึ่งจะถูกพิมพ์โดยไม่มีการรบกวนใด ๆ เลย มันสามารถใช้ในการรันโค้ดโดยพลการหลังจากที่สตริงจะถูกส่งผ่าน คุณสามารถใช้มันเพื่อส่งผ่านข้อมูลพิเศษของคุณ

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

คุณจะจบลงด้วยรหัสเช่นนี้:

var my_localized_data = {}; // What is left of your array
my_localized_data = {'layout_config': {'ls': {'sb1': 1}}}; // From l10n_print_after

ข้อจำกัดความรับผิดชอบ - ฉันไม่ได้มีส่วนร่วมกับเรื่องความปลอดภัยของ JS ที่นี่

ขั้นแรกเพื่อให้ตรงกับผลลัพธ์ที่คุณต้องการคุณจะปิดโดยระดับการซ้อน ชื่อวัตถุจะเป็นพารามิเตอร์ในการโทรแบบโลคัล (แทนคีย์อาร์เรย์):

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

แต่lsและrsยังคงWP_Scripts->print_scripts_l10n()ใช้งานไม่ได้เนื่องจากวิธีการไม่จัดการกรณีเมื่อตัวแปรเป็นอาร์เรย์

ดีที่สุดที่ฉันจะได้มากับการแก้ไขที่ติดตามตัวกรอง (ดังกล่าวข้างต้น - ไม่แน่ใจว่าจะใช้ความปลอดภัยในการผลิต แต่ให้แนวคิดทั่วไป):

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