CODEWITHSUNDEEP
javascriptaurelia
Dac0d3r
Dac0d3r

Reputation: 1854

Aurelia: Bind initially selected value from options inserted directly in html

Suppose you have a select dropdown like this:

<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 just ignore/abstract away from the i18n translation filter and the custom language changed notifier, however I did leave it there to illustrate I cannot just add these options from the .js file.

But my question is if you do it like this. Input your options directly in markup, how would you set an initial selected value inside the .js file?

When I do it like this and add @bindable status in my .js file, why is it saying it is undefined?

I would now have expected the selected (from initial load) option from the select field in the markup, to now be available in the .js file, thereby bound.

However this happens only when I manually change the selected value, clicking the select dropdown and picking an option.

How would I set the selected option initially, from the options html tags inserted in markup?

Edit:

I've 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>

Still it just says null when i console log it out.

Edit2

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

1) value instead of value.bind for option 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 bindable property value inside the viewmodel, and inside the constructor use i18n to programically translate inside the viewmodel. Something like eg:

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;
  }
}

Upvotes: 4

Views: 3641

Answers (1)

Jeremy Danyow
Jeremy Danyow

Reputation: 26406

When you bind a select's value attribute to a property on your viewmodel, the select element's value is always initialized with whatever the viewmodel property value is.

In other words, you must assign the desired initial value to the viewmodel's status property before the select is data-bound.

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>

Not sure if this answered your question though- let me know if I missed it.

Upvotes: 4

Related Questions