Aurelia compose ViewModel-less

Question

Trying to get the Aurelia compose ViewModel-less working and having some issues.

I was having problems in my project so to test I cloned the skeleton-typescript project. I created a test.html page within the src directory with the following contents <template><div>Hi I'm a test message</div></template>. Then, within the welcome.html page I added the following before the submit button <template><compose view="./test.html"></compose></template>.

It doesn't display so wondering if I'm doing something wrong (according to the docs this is how it's done) or is there an issue with aurelia's templating-resources?

I asked on Aurelia's Gitter channel but didn't get a reply and I don't want to raise an issue with the templating-resources in case it's something stupid I'm doing so thought I would ask here first.

Answer 1

It looks like you're almost there. With just a couple of tweaks, this should work. The steps required to add a dynamically composed view in Aurelia are as follows:

Creating a dynamic view

Create the HTML template. In this case you need to create your test.html template as shown in the below snippet.

test.html

<template> <div>Hi I'm a test message</div> </template>

Compose the view into your parent component

After you've created the view, you need to compose it into the parent component using the <compose> custom element provided by the Aurelia framework. In your case, you'll need to make the below alteration to your <welcome> view template:

<template>
  <section class="au-animate">
    <h2>${heading}</h2>
    <form role="form" submit.delegate="submit()">
      <div class="form-group">
        <label for="fn">First Name</label>
        <input type="text" value.bind="firstName" class="form-control" 
            id="fn" placeholder="first name">
      </div>
      <div class="form-group">
        <label for="ln">Last Name</label>
        <input type="text" value.bind="lastName" class="form-control" id="ln" placeholder="last name">
      </div>
      <div class="form-group">
        <label>Full Name</label>
        <p class="help-block">${fullName | upper}</p>
      </div>
      <compose view="./test.html"></compose>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </section>
</template>

After doing this, your view should include the new composed in HTML only custom element as shown in this screengrab.