Aurelia: bind originally selected value from parameters inserted directly into html

Question

Suppose you have a dropdown menu:

<select class="form-control" value.two-way="status">
    <option value="${'status_deceased' | t:notifier.signal}">${'status_deceased' | t:notifier.signal}</option>
    <option value="${'status_duplicate' | t:notifier.signal}">${'status_duplicate' | t:notifier.signal}</option>
</select>

You can simply ignore / ignore the i18n translation filter, and the user language has changed the notifier, however I left it there to illustrate. I cannot just add these parameters from a .js file.

But my question is: if you do it like that. Enter your parameters directly into the markup, how would you set the original selected value inside the .js file?

When I do this and add @bindable statusto my .js file, why does it say that it is undefined?

Now I expected that the selected (from the boot) option from the selection field in the markup will now be available in the .js file, thereby contacting.

However, this only happens when I manually change the selected value by clicking the drop-down menu and selecting an option.

How would I set the selected parameter initially, from html parameter tags inserted into the markup?

Edit:

I also tried like this: using value.bind instead and without bind.two-way:

<select class="form-control" value.bind="status">
    <option value.bind="'status_deceased' | t:notifier.signal">${'status_deceased' | t:notifier.signal}</option>
    <option value.bind="'status_duplicate' | t:notifier.signal">${'status_duplicate' | t:notifier.signal}</option>
</select>

However, it just says null when I exit the console.

Edit2

Thanks to Jeremy's comment, the solution turned out to be:

1) instead of value.bind for parameter values

<select class="form-control" value.bind="status">
    <option value="${'status_deceased' | t:notifier.signal}">${'status_deceased' | t:notifier.signal}</option>
</select>

2) set the initial value of the bindable property inside the viewmodel, and inside the constructor i18n uses programmatic translation inside the viewmodel. Something like, for example:

import {inject, bindable} from 'aurelia-framework'; import {I18N} from 'aurelia-i18n';

@inject(I18N)
export class App {
  @bindable lolcat;

  constructor(i18n){
    this.i18n = i18n;
    this.lolcat = i18n.tr('test');
  }

  lolcatChanged(value){
    this.lolcat = value;
  }
}

Answer 1

value value , select viewmodel.

, viewmodel.

export class App {
  status = 'status_deceased';
}

<select class="form-control" value.bind="status">
  <option value="status_deceased">${'status_deceased' | t:notifier.signal}</option>
  <option value="status_duplicate">${'status_duplicate' | t:notifier.signal}</option>
</select>

, , , , .