claudetech / node-static-i18n

HTML static pages i18n tool
https://www.npmjs.com/package/static-i18n
MIT License
104 stars 21 forks source link

Interpolation not working as I expect it to #24

Open CombesA opened 6 years ago

CombesA commented 6 years ago

Hey there ! Just so you know, you're doing a great job, your tool is really easy to use and it makes everything simple, thanks !

I have this issue, I'm trying to do the following : `\

  {{test}}

\

`

You talked about it in the conversation on the PR #16 . This should work now but it doesn't. My case is that I want a checkbox, like so : `\

{{contact.call.title}}

\

` I had the problem where my checkbox was removed by your script. Now that code is displaying the checkbox, but doesn't translate the text. The text displayed stays that way : {{contact.call.title}}

I was wondering if I was doing something wrong.

Thanks a lot !

P.S. : Sorry, I had some issues trying to write code in here ahah.

danhper commented 6 years ago

Hi, I think you are just missing the data-t attribute. It is still needed even if you have the data-t-interpolate attribute, otherwise your tag will not be considered for translation. Could you give it a try please? Thanks.

CombesA commented 6 years ago

Hey, sorry I was abroad for some time, that's why I couldn't answer. I tried what you told me. Now this :

<div data-t data-t-interpolate>
      <div>Test test</div>
      {{test}}
</div>

Works perfectly. {{test}} get replaced by the right text, and "Test test" stay the same. I was indeed missing the data-t attribute.

This, on the other hand :

<div data-t data-t-interpolate>
      <div>Test test</div>
      <input type="checkbox" name="vehicle" value="Bike">
      {{test}}
</div>

Does not work, as it removes the checkbox. {{test}} get replaced by the right text, and "Test test" stay the same though. But the input got removed. I've tried with a classic input, and it did the same. I've also tried with a select, and some options :

<div data-t data-t-interpolate>
      <div>Test test</div>
      <select>
        <option>Mo</option>
        <option>Tu</option>
        <option>We</option>
        <option>Th</option>
        <option>{{test}}</option>
      </select>
      {{test}}
</div>

Here, both of the {{test}} are replaced by the right text, and "Test test" also stay the same. But the <select> and <option> tags are disappearing, only the text inside doesn't.

So here the result of that last piece of code after it went through your script :

Test Mo Tu We Th English translation Test English translation

I don't really know what I'm missing out on. Thanks for taking the time to help me !

martinbarilik commented 3 months ago

@CombesA did you manage to solve this ? i am fighting this ATM.

Just curious if it works at all so i won't waste my time.

danhper commented 3 months ago

I am pretty sure this a bug. The easiest way to work around it is probably to wrap the text inside a span with the relevant attributes. If you have time to send a PR to fix it, that'd obviously be very welcome!