Using Aurelia for string templating?

Help Requests
1

I’d like to create a value converter that would work something like this.

<span textcontent.bind="'My name is ${placeholder}.' | template:{ placeholder: 'Dan' }"></span>

Results in:

<span>My name is Dan</span>

Obviously both constants 'My name is ${placeholder}.' and 'Dan' could be dynamic values, while the name placeholder is known.

Are there APIs available in Aurelia that I could use within the ValueConverter to perform the string replacement logic?

1 Like
2

How about this https://codesandbox.io/s/aurelia-sandbox-btcxw? (Look into app.js)

You might as well look into the Aurelia i18n plugin since it seems to be somewhat the thing you want to achieve

1 Like
3

Obviously I am biased. This seems to me a perfect use case for i18n plugin. If there is a key describing the template, the placeholder in the template can be replaced by providing parameters. Check this here, search for ‘Passing parameters to the attribute’.

In v2 I believe you can evaluate any random expression. There i18n wouldn’t be needed, and a simple value converter should suffice.

2 Likes
4

You can achieve it with a little bit of plumbing, example here https://codesandbox.io/s/httpsdiscourseaureliaiotusing-aurelia-for-string-templating3179-tb3gj

Note:

  • we use default binding language implementation to reuse its interpolation parser
  • we create the scope to evaluate the text on the fly
3 Likes
5

lol thats insane … you know what you can do with that?

<span textcontent.bind="'My name is ${placeholder | upperCase }.' | template:{ placeholder: 'Dan' }"></span>

export class UpperCaseValueConverter {
  toView(value: string) {
    return value.toUpperCase();
  }
}

4 Likes
6

That’s so nice :smile:
But all those value converter needs to be global though, since the template value converter is global

Edit: updated the sandbox to accommodate the fun part :stuck_out_tongue:

2 Likes
7

I. Love. This. :exploding_head:

Thanks!

1 Like
8

@bigopon @zewa666

I made the “message part” dynamic as well and added some fail safes (null checks and try/catch) to ensure page doesn’t break while editing (this is not the use case, but the fail safes are probably a good idea to cater for any developer mistakes).

Anything better than using try/catch for this…?

1 Like
9

Aurelia has been smashing all the super ultra dynamic form requirements for long time, we just sometimes forgot it :smile:

2 Likes