# Complex binding with i18n

**URL:** <https://discourse.aurelia.io/t/complex-binding-with-i18n/3138>\
**Category:** Help Requests\
**Created:** [January 6, 2020, 7:54pm UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138 "2020-01-06T19:54:27Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [January 6, 2020, 7:54pm UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/1 "2020-01-06T19:54:27Z")

</div>

I have a simple custom component `text-input`

```auto
<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:

```auto
<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

```auto
"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

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [January 6, 2020, 9:11pm UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/2 "2020-01-06T21:11:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mroeling](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mroeling/32/781_2.png) [@mroeling](https://discourse.aurelia.io/u/mroeling)\
**Post date:** [January 7, 2020, 7:41am UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/3 "2020-01-07T07:41:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [January 7, 2020, 11:39am UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/4 "2020-01-07T11:39:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [January 7, 2020, 3:01pm UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/5 "2020-01-07T15:01:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [January 7, 2020, 4:12pm UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/6 "2020-01-07T16:12:52Z")

</div>

```auto
@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"`

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [January 7, 2020, 4:30pm UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/8 "2020-01-07T16:30:09Z")

</div>

Doesn’t seem to work …

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/7/7b6e7609b91f8f6710d2d0fba9ef631b12655f3c.png)

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [January 7, 2020, 5:01pm UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/9 "2020-01-07T17:01:14Z")

</div>

Thanks for the reply and checking it out

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [January 22, 2020, 10:57am UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/10 "2020-01-22T10:57:32Z")

</div>

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

```auto
  <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

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

```

where title looks like:

```auto
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

```auto
<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!

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [January 22, 2020, 4:29pm UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/11 "2020-01-22T16:29:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [January 22, 2020, 5:59pm UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/12 "2020-01-22T17:59:08Z")

</div>

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

Hopefully it clarifies what I’m trying to achieve

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [January 22, 2020, 9:39pm UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/13 "2020-01-22T21:39:05Z")

</div>

@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](https://stackoverflow.com/a/28324109/2270340)

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [January 23, 2020, 12:22am UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/14 "2020-01-23T00:22:48Z")

</div>

Excellent - I hadn’t thought of that!

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [January 23, 2020, 4:23am UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/15 "2020-01-23T04:23:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [January 23, 2020, 7:39am UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/16 "2020-01-23T07:39:07Z")

</div>

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??)

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [January 23, 2020, 7:48am UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/17 "2020-01-23T07:48:35Z")

</div>

Oops - spoke too soon

How would I bind the innerhtml for `placeholder` ?

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [January 23, 2020, 8:01am UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/18 "2020-01-23T08:01:06Z")

</div>

a placeholder cannot render html as far as I know

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [January 23, 2020, 8:05am UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/19 "2020-01-23T08:05:03Z")

</div>

Oh!

Actually correct substitution for `${label`} should probably be

```auto
<label innerhtml.bind="label | santizeHTML"></label>

```

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [January 23, 2020, 10:29am UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/20 "2020-01-23T10:29:28Z")

</div>

More on that: [Vulnerability Disclosure Contact](https://discourse.aurelia.io/t/vulnerability-disclosure-contact/2390/9)

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [January 23, 2020, 2:59pm UTC](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138/21 "2020-01-23T14:59:12Z")

</div>

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?

[Next page](https://discourse.aurelia.io/t/complex-binding-with-i18n/3138.md?page=2)