Complex binding with i18n

Help Requests
1

I have a simple custom component text-input

<template>
  <input type="text" class="form-control" disabled.bind="disabled" value.bind="value" placeholder.bind="label">
  <label>${label}</label>
</template>

which I use as follows:

<text-input value.bind="model.voyageNumber" t="[label]voyage-number"></text-input>

The problem I’m having is that I’m trying to bind to

"voyage-number":"Voyage &numero;"

If I use t="[label]voyage-number;[html]voyage-number" the innerhtml overwrites the <input/>.

I’ve tried all combinations I can think of - changing the order of [label] and [html] all to no avail.

Is this possible to do?

Thanks in advance

1 Like
2

Is label declared as a bindable property? Can you show the VM of text-input?

1 Like
3

Is there a specific reason to translate in the call of the custom element instead of in the label element?
Or perhaps use label.bind="‘voyage-number’ & t" within the custom element call.

1 Like
4

It was because sometimes the translation takes parameters. In any event I replaced all references to &numero; with № which seems to work just fine

2 Likes
5

I wonder whether escapeHtml would have helped https://stackoverflow.com/questions/16038458/html-tags-in-i18next-translation

1 Like
6 
@autoinject
export class TextInput {
  @bindable({ defaultBindingMode: bindingMode.twoWay })  public value: string;
  @bindable public label: string;
  @bindable public disabled = false;

  protected bind() {
    this.disabled = trueFalse(this.disabled);
  }
}

I’ll try the escapeHtml and report back

I would add that the component works fine for t="[label]regular-text"

1 Like
8

Doesn’t seem to work …

image
image779×998 37.8 KB

1 Like
9

Thanks for the reply and checking it out

1 Like
10

Sorry that I’m coming back to this again, but I think there needs to be a mechanism where you can apply the [html] attribute together with a custom attribute [mylabel].

The dox give these two examples

  <input t="[placeholder,aria-placeholder]placeholder">
  <span t="[html]title;[class]title-class">Title</span>

In the second example [html] is applied to one property and [class] is applied to another property.

I want to apply [html] to the custom property [label] on the element.

something like

<custom-element t="[html,label]title"></custom-element> (example syntax)

where title looks like:

title: hello <strong>Aurelia</strong>

Any chance someone could take a look at this or suggest a work-around?

At the moment I’m breaking my translations down into very small parts which is cumbersome to say the least

<custom-element>
  <span t="title-hello"></span>
  <strong t="title-name"></strong>
</custom-element>

On long pieces of text, you can imagine how ugly this gets!

1 Like
11

I’m still not entirely sure what exactly you’re trying to achieve nor where the potential issue could be. So please if you could create a fresh new cli project showing the total minimum with the expected outcome I’m sure we can find a solution. The smaller and isolated the sample the easier it will be to get the use case

1 Like
12

Hi. I’ve just put a minimum project at https://github.com/jeremy-holt/i18n-markup-issues

Hopefully it clarifies what I’m trying to achieve

1 Like
13

@jeremyholt I would say that it might be easier to change the <label>${label}</label> to <label innerhtml.bind="label"></label> . And then you can have t=[label]key at the place of usage.

Refer: https://stackoverflow.com/a/28324109/2270340

1 Like
14

Excellent - I hadn’t thought of that!

1 Like
15

That was exactly what I had in mind and the example clarified. Thx @jeremyholt

1 Like
16

Started updating all my custom components to innerhtml.bind=“label”.

Works a treat!

Many thanks to everyone for their help

(Perhaps this could be included somewhere in the dox??)

1 Like
17

Oops - spoke too soon

How would I bind the innerhtml for placeholder ?

<template>
  <div class="form-label-group">
    <input type="email" disabled.bind="disabled" class="form-control" value.bind="value" placeholder.bind="label">
    <label innerhtml.bind="label"></label>
  </div>
</template>
1 Like
18

a placeholder cannot render html as far as I know

1 Like
19

Oh!

Actually correct substitution for ${label} should probably be

<label innerhtml.bind="label | santizeHTML"></label>
3 Likes
20

More on that: Vulnerability Disclosure Contact

1 Like
21

Oh - thanks for that.

Question - I am in total control of what is going into the innerhtml.bind - i.e. its only coming from my translation files. Do I really need to sanitize the input?

1 Like