i18next and blade bug

[nkhine]

I am using i18next http://i18next.com/ with blade to localize a website, but have an issue with this code:

p.welcome(data-i18n="[html]welcome")!=t("welcome")

the blade parser returns both the nodejs generated template and the browser:

__.push("<p" + ' data-i18n="[html]welcome"' + ' class="welcome"' + ">" + t("welcome") + "</p>");

you can see it here, http://blade.eu01.aws.af.cm, if you click on the globe and change the language to french, on the index page, you get two version of the welcome text!

http://blade.eu01.aws.af.cm/views/index.blade returns this:

blade._cachedViews["index.blade"]=function anonymous(locals, cb, __) {
    __ = __ || [];
    __.r = __.r || blade.Runtime;
    if (!__.func) __.func = {}, __.blocks = {}, __.chunk = {};
    __.locals = locals || {};
    __.rel = ".";
    __.filename = "index.blade";
    try {
        with (__.locals) {
            __.line = 1, __.col = 1;
            __.r.include("../layout/layout.blade", __);
            __.line = 2, __.col = 1;
            var title = i18n.t("tzm");
            __.line = 3, __.col = 1;
            __.r.blockRender("a", "title", __, title);
            __.line = 4, __.col = 1;
            __.r.blockMod("r", "page", __, function(__) {
                __.line = 5, __.col = 5;
                __.push("<p" + ' id="notification"' + ">" + "</p>");
                __.line = 6, __.col = 5;
                __.push("<p" + ' data-i18n="[html]welcome"' + ' class="welcome"' + ">" + t("welcome") + "</p>");
            });
        }
    } catch (e) {
        return cb(__.r.rethrow(e, __));
    }
    if (!__.inc) __.r.done(__);
    cb(null, __.join(""), __);
};if(blade._cb["index.blade"])blade._cb["index.blade"](".",["../layout/layout.blade"],false);

is this a bug with blade as the developer of i18next thinks http://stackoverflow.com/a/14848657/477340 it is or something i have missed?

the code is here: https://github.com/TZM/tzm-blade/blob/master/views/index.blade#L6 and the javascript widget works from https://github.com/TZM/tzm-blade/blob/master/public/js/locale.js#L55

[bminer]

This does not feel quite like a Blade issue. If you could be more specific, that would help. Ideally, I'd like to understand what your desired HTML is supposed to look like. Then, we can try to reconcile the differences between your Blade template, the generated HTML, and your desired HTML.

Closing this issue for now.

[nkhine]

the desired html should be:

<div id="page">
    <p id="notification"></p>
    <p>Fondé en 2008, le Mouvement Zeitgeist est une organisation qui plaide pour la construction d'un monde durable et véhicule un activisme local et des actions de sensibilisation par le biais d’un réseau de branches nationales et régionales, d’équipes de projets, d’évènements annuels, de médias et d’œuvres caritatives.</p>
    <p>Les principes fondamentaux du Mouvement incluent la reconnaissance que la majorité des problèmes sociaux qui gangrènent actuellement l’espèce humaine ne sont pas uniquement le fruit d’une corruption institutionnelle, de la rareté, de manœuvres politiques, d’un défaut de « la nature humaine » ou d’autres causes communément évoquées au sein de la communauté activiste. Le Mouvement reconnaît en revanche que les problèmes tels que la pauvreté, la corruption, l’effondrement économique, l’accès au logement, la guerre, la famine, etc. sont autant de « symptômes » provenant d’une structure sociale dépassée.</p>
</div>

but for some reason if you inspect the source, http://blade.eu01.aws.af.cm/ you get two extra

's, one of them being the <p data-i18n="[html]welcome" class="welcome"></p> which is empty

<div id="page">
    <p id="notification"></p>
    <p data-i18n="[html]welcome" class="welcome"></p>
    <p>Fondé en 2008, le Mouvement Zeitgeist est une organisation qui plaide pour la construction d'un monde durable et véhicule un activisme local et des actions de sensibilisation par le biais d’un réseau de branches nationales et régionales, d’équipes de projets, d’évènements annuels, de médias et d’œuvres caritatives.</p>
    <p>Les principes fondamentaux du Mouvement incluent la reconnaissance que la majorité des problèmes sociaux qui gangrènent actuellement l’espèce humaine ne sont pas uniquement le fruit d’une corruption institutionnelle, de la rareté, de manœuvres politiques, d’un défaut de « la nature humaine » ou d’autres causes communément évoquées au sein de la communauté activiste. Le Mouvement reconnaît en revanche que les problèmes tels que la pauvreté, la corruption, l’effondrement économique, l’accès au logement, la guerre, la famine, etc. sont autant de « symptômes » provenant d’une structure sociale dépassée.</p>
    <p></p>
</div>

whereas on the index.blade template, i have just this:

include "../layout/layout.blade"
replace block page
    p#notification
    p.welcome(data-i18n="[html]welcome")!=t("welcome")

so it seems that blade interprets <p data-i18n="[html]welcome" class="welcome"></p> as two separate entities rather as one!

this only happens in this use case, where the translation.json item contains an array https://github.com/TZM/tzm-blade/blob/master/locales/dev/translation.json#L3

perhaps the issue is in the data-i18n="[html]welcome" ?

[bminer]

Ah, I see now.

If you truly view the source in Google Chrome by typing view-source:http://blade.eu01.aws.af.cm/ in the address bar, then you will see that Blade is rendering your HTML correctly. When you view the source from Google Chrome's Developer Tools, you will find that Google Chrome has placed both <p> tags outside of your <p data-i18n="[html]welcome" class="welcome"></p>, as you described. Chrome does this because it is illegal to place a <p> tag (or any other block element) within another <p> tag in HTML. For proof, see this question on StackOverflow.

To fix your problem, just change the <p> tag to a <div>. Hope that helps!!!

[nkhine]

oh i see, thanks this did it div.welcome(data-i18n="[html]welcome")!=t("welcome")