CODEWITHSUNDEEP
javascriptaurelia
Simon
Simon

Reputation: 5493

Aurelia - Binding <select> doesn't set view model property

When a select dropdown is created, the bound property on the view model isn't updated to the default option.

e.g. Given this viewmodel:

export class App {

  @observable
  selected = 0;

}

and this view

<select value.two-way="selected">
  <option model.bind="1">1</option>
  <option model.bind="2">2</option>
  <option model.bind="3">3</option>
</select>

<span>
    The selected value is: ${selected}
</span>

When the page is initially rendered you will see "The selected value is: 0" - even though the dropdown will show 1. Change the dropdown to 2 and back to 1 and you will see "The selected value is: 1".

I can see why you might what that behaviour, but it is different to Knockout (I'm converting an old Durandal app)... is there a way of forcing the viewmodel property to be one of the valid select options?

Live plunkr here: http://plnkr.co/edit/v4y3k3TcEzOrm4P2ulNy?p=preview

NOTE: the really world code isn't purposing setting the 'selected' property to a non-existent value, the dropdown has a value-converter that filters options out but doesn't force the viewmodel property to update to the default option.

Thanks.

Upvotes: 2

Views: 1236

Answers (1)

user1375096
user1375096

Reputation:

Read Fred's explanation here: https://github.com/aurelia/binding/issues/686

If you use repeat.for to build options. It will set the initial value correctly, due to the delayed population of options which fires an change event.

<select value.bind="selected">
  <option repeat.for="v of [1,2,3]" model.bind="v">${v}</option>
</select>

FYI, use value.two-way is unnecessary as value bind is by default two way on select/input tag.

Upvotes: 1

Related Questions