XF 2.0 To day I learn: XF2 and extending phrases

[Xon]

Instead of the following (styled after what works in XF1)

<xf:js>
jQuery.extend(XF.phrases, {
                "picker": "{{ phrase('picker')|escape('json') }}",
                "update": "{{ phrase('update')|escape('json') }}"
            });
</xf:js>

XF2 supports the following;

<script class="js-extraPhrases" type="application/json">
            {
                "picker": "{{ phrase('picker')|escape('json') }}",
                "update": "{{ phrase('update')|escape('json') }}"
            }
</script>

The "js-extraPhrases" handling occurs before the HTML is attached, so you avoid races between when the custom phrases are added and when various jvascript actually executes

 

[DragonByte Tech]

Interestingly I find only 1 case of js-extraPhrases being used, but 5 cases of jQuery.extend

js-extraPhrases appears to only be used in XF2 inside <xf:head>, specifically for the color_picker_scripts template.

@Chris D any insight on this - what's recommended and is there a specific use case for each?


Fillip

 

[Xon]

@DragonByte Tech In overlays, I had an issue where the phrase just wasn't been translated/extended in time for my javascript that depended on it running. js-extraPhrases [/code] is the very first thing processed when [icode]activate is called, so if you need to demand load phrases (rather than stick them as a phrase available on every page) I'ld use that approach.