2 way databinding in Aurelia custom elements - bind custom element to parent viewmodel

Question

In my application I have made a lot of \"services\" which I can inject in my viewmodels to save som redundancy and time.

Now I\'m looking to take it 1 step further,

Answer 1

There are a couple of issues here:

1. You need to kebab-case any property names in the DOM due to case-insensitivity

   selected-value.bind="property"

   not

   selectedValue.bind="property"

2. You need to bind two-way. When creating a @bindable using the decorator, one of the arguments is BindingMode which you use to set the default binding mode.

   Aurelia sets some sensible defaults, e.g. the default for input value.bind=".." is two way without being explicit

   If you don't want to set a default binding mode, you can just be explicit with your binding:

   selected-value.two-way="prop"

Hope this helps :)

Edit: I think the API changed a little after this answer.

The @bindable decorator has the following sig:

bindable({
  name:'myProperty',
  attribute:'my-property',
  changeHandler:'myPropertyChanged',
  defaultBindingMode: bindingMode.oneWay,
  defaultValue: undefined
})

One of the best places to check for quick reference is the Aurelia cheat-sheet in the docs:

http://aurelia.io/docs/fundamentals/cheat-sheet