title: Aurelia compose
body: <p>Quick question regarding Aurelia's <code>&lt;compose&gt;</code> element.  I had hoped to use it to insert custom elements as form controls, like this:</p>
  
  <pre><code>&lt;!-- Loop through form controls --&gt;
  &lt;div class="form-group" repeat.for="control of controls"&gt;
    &lt;label&gt;&lt;span t="${control.label}"&gt;&lt;/span&gt;&lt;/label&gt;
    &lt;compose view-model="resources/elements/${control.type}/${control.type}" 
      value.bind="control.value" data.bind="control.data" placeholder.bind="control.placeholder"&gt;&lt;/compose&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, it's starting to look like the <code>&lt;compose&gt;</code> element is limited to only accepting <code>model</code>, <code>view-model</code> and <code>view</code> parameters.  Is that correct?  What's the best way to pass parameters like <code>value</code>, <code>data</code>, <code>placeholder</code> to my custom elements based on <code>control.type</code>?</p>
  
  <p><strong>Edit with my Solution:</strong></p>
  
  <p>In the end, it appears that Aurelia's <code>&lt;compose&gt;</code> only works with <code>view</code>, <code>view-model</code> and <code>model</code> attributes.  My solution is to pass all data <strong>(can be multiple items passed as a single object)</strong> like this:</p>
  
  <pre><code>&lt;compose view-model="resources/elements/${control.type}/${control.type}" 
           model.bind="{'control': control, 'model': model, 'readonly': readonly}"&gt;
  &lt;/compose&gt;
  </code></pre>
  
  <p>What I <em>did</em> find interesting is that when you use <code>model.bind</code>, you don't need to use the <code>@bindable</code> decorator to receive the parameters.  They're available immediately in the view.</p>