[Solved] Update translated text genereted from model

Help Requests
1

I have problem updating translated text generated from model.
I have configuration panel with number of rows. Each row is separated object, rows are stored as array in configuration object. Some rows have extended configuration available via dedicated dialog. Few extended settings are meant to be visible as text in configuration table column. To do so I have following markup in table cell:

<span if.bind="!row.address" t="config.rows.disabled">Disabled</span>
<span if.bind="row.address" t-params.bind="{row: row}" t="config.rows.extinfo">
    Address: ${ row.address }, Command: ${ row.command }
</span>

Text in second span is only updated when extended dialog open and save changes if.bind="" condition state. So to update table cell each time I make following hack:

private async extConfig(row: RowConfig) {        
    let result = await this.dialog.open({
        viewModel: RowConfiguration,
        model: { row: { ...row } }
    }).whenClosed();

    if (!result.wasCancelled) {
        Object.assign(row, result.output);
        let tmp = row.address;
        if (tmp) {
            row.address = null;
            setTimeout(() => row.address = tmp, 100);
        }
    }
}

Any suggestion how to make it more cleanly?

1 Like
2

I think what you’re looking for is the signal binding behavior which you could use with the if binding. With that you can notify externally that the if binding needs to be re-evaluated.

Take a look at the docs here with an attached codesandbox

3 Likes
3

@Semtox, something like this

JS

import {I18N}               from 'aurelia-i18n'
import {EventAggregator}    from 'aurelia-event-aggregator'
import {BindingSignaler}    from 'aurelia-templating-resources'
 
export class Sample {
     
    static inject = [I18N,BindingSignaler,EventAggregator];
     
    constructor(i18n,signaler,ea) {
 
        this.i18n       = i18n;
        this.signaler   = signaler;
 
        ea.subscribe('i18n:locale:changed', payload => {         
            this.signaler.signal('i18n-update');    
        });
    }
}

HTML

<template>
    <span>${'common.actions.create' | t & signal:'i18n-update'}</span>
</template>
2 Likes