i18n on custom elements with @bindable does not work with 't.bind'

[Ranga Senal Fernando]

I'm submitting a bug report

• Library Version:
  aurelia-i18n : 1.6.1
  aurelia-framework: 1.1.2

Please tell us about your environment:

• Operating System:
  Windows [10]

• Node Version:
  6.9.5

• Aurellia-CLI Version:
  0.29.0

• Browser:
  all

• Language:
  TypeScript 2.2.2.0

Current Issue:

I have already post a question on SO.
https://stackoverflow.com/questions/44793186/i18n-on-custom-elements-with-bindable-does-not-work-with-t-bind

I'm creating an issue thinking this could be a bug.

I've noticed that a similar issue has been fixed in #123. But it was an issue with 't/i18n'

But I'm facing an issue with 't.bind'
We have a use case in which we need to construct the expression and bind it to 't/i18n'

e.g:
<template> <my-custom-element t.bind="messagekey" t-params.bind="{ param1: 10, param2: 10 }"></my-custom-element> <my-custom-element t.bind="messagekey"></my-custom-element> </template>

In the view-model we construct the messagekey as bellow:

this.messagekey = "[title]content_key";

When you run the application nothing is being written to the custom-element.

However, I tried this with 't' with literal values;
<template> <my-custom-element t="[title]content_key" t-params.bind="{ param1: 10, param2: 10 }"></my-custom-element> <my-custom-element t="[title]content_key"></my-custom-element> </template>

and it worked.

[Vildan Softic]

Hi @senal. I wasn't able to reproduce this issue on my side, could you create a small example as instructed with the issue template so that I can take a look at your exact setting?

[Ranga Senal Fernando]

Hi @zewa666 ,

Thanks for your prompt reply.

I thought it would be best to use the same component which is having the issue.
NOTE:

1. You may need to setup a back-end for i18n to provide contents.
2. Remove unnecessary verbose.

Alert-box custom element

We implement a custom element to show alerts in our system.

alert-box.html
`

<div show.bind="isElementVisible">

    <p>${hint}</p>
    
    <ul if.bind="messages.length">
        <li repeat.for="message of messages">${message}</li>
    </ul>

    <span class="close" click.delegate="close()"></span>
</div>

`

alert-box.ts [view-model]

`import { bindable, bindingMode } from "aurelia-framework";

export class AlertBoxCustomElement {

@bindable({ defaultBindingMode: bindingMode.twoWay })
isVisible = false;

@bindable
hint = '';

isElementVisible = false;

private isVisibleChanged() {
    if (this.isVisible) {
        this.isElementVisible = true;
    } else {
        this.isElementVisible = false;
    }
}

}`

Using alert-box in sample component

CASE 1: using 't' with expression

dashboard.html

`

<alert-box  t="[hint]content_ChangePassword" is-visible.bind="isAlertVisible" ></alert-box>    
<button click.trigger="showMessage()" t="[text]content_ChangePassword"></button>

`

dashboard.ts
`
export class Dashboard {

internalMessage = "";

isAlertVisible = false;

showMessage() {
    this.isAlertVisible = true;
    this.internalMessage = "[hint]content_InvalidEmailOrPassword";
}

}
`
As you could see, I have used the 't' with a literal 't="[hint]content_ChangePassword"'.
Pressing the button you could see the text printed on the view.

CASE 2: using 't.bind' with expression (The issue)

dashboard.html
`

<alert-box  t="internalMessage" is-visible.bind="isAlertVisible" ></alert-box>    
<button click.trigger="showMessage()" t="[text]content_ChangePassword"></button>

`

dashboard.ts
`
export class Dashboard {

internalMessage = "";

isAlertVisible = false;

showMessage() {
    this.isAlertVisible = true;
    this.internalMessage = "[hint]content_InvalidEmailOrPassword";
}

}
`
Now I have set an expression to 't.bind' with a property which is populated in the view-model 't.bind="internalMessage "'.

Press the button you don't see any text printed on your view.

Hope this helps you to get an insight into the problem context and eventually help us to resolve this issue.

Let me know if you see anything wrong in the design or the implementation of this components.

Feel free to contact me if you need further information.

Thanks

[Vildan Softic]

@senal thanks for the detailed description. I've tried that and ... it still works :)
How about the following, create a new project with the CLI, add all your code and verify that you have the issue. When done, pack up all the contents (excluding node_modules of course) and post the zip somewhere so I can take a look at whats missing. As for the backend use either the built in aurelia-loader backend or xhr-backend as described in the the docs.

Now I'm really interested in seeing whats going wrong :)

[Ranga Senal Fernando]

Hi @zewa666,

Big thanks for your prompt feedback. :)

Do you mind if I ask you to send (perhaps a link to a github repository) me your test project to test on my local ?

Meantime I will do a sample project as you requested.

Thanks for your interest in solving mysteries :)

Regards

[Ranga Senal Fernando]

Hi @zewa666 ,

The mystery has been solved.

we changed the name of the property to
@bindable mainMessage: string;

Everything started to work !
Thank you very much for your support !

P.S: Closing this issue.

[Vildan Softic]

So it sounds like a side effect you had there. I'm glad it got resolved.