Can't get layoutView to work on Route

Help Requests
1

I’ve got a number of routes that display report data. I’m using the ViewModel to load the proper data and do the appropriate work on that data to put it into a common format.

Since the routes all use a common format for the data, I want to use a common View. I thought I could accomplish this using layoutView on the route – but I haven’t been able to get this to work. I saw this post on SO and the “solution” was to use compose instead of <router-view>.

The Aurelia documentation seems to indicate this should work with <router-view>. Is that possible? If so, what am I doing wrong?

My code:

reports/reports-shell.ts

//route configuration
{ route: "mhbyage"
  , name: "mhbyage"
  , moduleId: PLATFORM.moduleName("./mh-by-age") 
  , title: "Age"
  , nav: true },
{ route: "mhbyrace"
   , name: "mhbyrace"
   , moduleId: PLATFORM.moduleName("./mh-by-race")
   , title: "Race"
   , nav: true
   , layoutView: PLATFORM.moduleName('./mh-by-age.html') },

The “Age” route works with no problem – loading mh-by-age.html by default. But when loading the “Race” route, I get the error

Unable to find module with ID: mh-by-age.html

I have also tried layoutView: './mh-by-age.html' on the “Race” route – which I didn’t expect to work since I’m using WebPack – resulting in the same error.

My directory structure looks like this:

 + src
  ---+ reports
     --- mh-by-age.ts
     --- mh-by-age.html
     --- mh-by-race.ts
  --- main.ts
1 Like
2

Have you tried using an absolute path, e.g. PLATFORM.moduleName('reports/mh-by-age.html')?
I’ve encountered issues before with relative paths, which produced that error. Your code looks fine and I’ve done similar things without issue.

1 Like
3

Thanks for the advice. Weirdly enough, that fixed the error message and allowed the View to be found – however, the binding engine was unable to bind the model from the VM. IOW, both of my ViewModels have a groups[] property. The list of groups was displayed when running the mhbyage route but with the mhbyrace report(when using the absolute pathing) the html elements displayed but the data (from the groups property) was not displayed.

To make this clearer: mh-by-age.ts and mh-by-race.ts both have a property:

private groups : ReportGroup[] = [];

The html file that I’m referencing for the view does the following:

<template>
    <table>
        <thead> ... </thead>
        <tbody>
            <template repeat.for="group of groups">
                ...
            </template>
          </tbody>
    </table>
</template>

mh-by-age displays both the table (column headers, etc.) with the data. mh-by-race displays the table headers, but no data (even though groups contains data).

Not entirely sure what is going on with this.

1 Like
4

I suspect that this is due to your use of <table>. I’m struggling to find the reference now but I believe there is documentation around the hazards of using <template> with a <table>.
Try using <tr repeat.for="group of groups">?
Could also try <template as-element="tr" repeat.for="group of groups">, see as-element but I doubt that’s necessary.

1 Like
5

See the Aurelia Cheatsheet - Templating Basics for the legal code.
Also a good article by Matthew James Davis

1 Like