Aurelia compose

Question

Quick question regarding Aurelia's <compose> element. I had hoped to use it to insert custom elements as form controls, like this:

<!-- Loop through form controls -->
<div class="form-group" repeat.for="control of controls">
  <label><span t="${control.label}"></span></label>
  <compose view-model="resources/elements/${control.type}/${control.type}" 
    value.bind="control.value" data.bind="control.data" placeholder.bind="control.placeholder"></compose>
</div>

However, it's starting to look like the <compose> element is limited to only accepting model, view-model and view parameters. Is that correct? What's the best way to pass parameters like value, data, placeholder to my custom elements based on control.type?

Edit with my Solution:

In the end, it appears that Aurelia's <compose> only works with view, view-model and model attributes. My solution is to pass all data (can be multiple items passed as a single object) like this:

<compose view-model="resources/elements/${control.type}/${control.type}" 
         model.bind="{'control': control, 'model': model, 'readonly': readonly}">
</compose>

What I did find interesting is that when you use model.bind, you don't need to use the @bindable decorator to receive the parameters. They're available immediately in the view.

I also just learned from Ashley Grant that you can't use the @bindable parameter with <compose>, and that if you have a view-only element, the view is connected to the outer scope, but if you have a view-model, you need to pass via model.bind. — LStarky
What I did find interesting is that when you use model.bind, you don't need to use the @bindable decorator to receive the parameters. They're available immediately in the view. Is this still true? I can't seem to find a way for Aurelia to bind the model properties to the viewmodel, without actively assigning them myself... — seebiscuit

Jeff G Jeff G · Accepted Answer · 2017-01-27T14:54:59

How about using model.bind?

<!-- Loop through form controls -->
<div class="form-group" repeat.for="control of controls">
  <label><span t="${control.label}"></span></label>
  <compose view-model="resources/elements/${control.type}/${control.type}"
    model.bind="control"></compose>
</div>

Then the view-model would have access to value, data and placeholder from its model property.

Aurelia compose

2 Answers