CODEWITHSUNDEEP
aureliaaurelia-templating
LStarky
LStarky

Reputation: 2777

Aurelia compose

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.

Upvotes: 2

Views: 2720

Answers (2)

Fabio
Fabio

Reputation: 11990

The <compose> has access to the outer scope, so you don't need to bind anything. This should work:

Usage

<compose view-model="resources/elements/${control.type}/${control.type}"></compose>

HTML

<template>${propertyFromParent}</template>

Running example https://gist.run/?id=8bb9c5503b4bbb7923a3a4c9e804c656

Upvotes: 2

Jeff G
Jeff G

Reputation: 2175

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.

Upvotes: 2

Related Questions