In the process of developing an Aurelia app, I am tasked with creating functionality that allows users to display various lists for different resources. These lists share common features such as a toolbar with search and refresh capabilities, along with a paginated list of resources.
Initially, I successfully implemented this for a single resource, but now I need to replicate significant portions of TypeScript code and HTML for additional resource lists. Instead of duplicating everything, I opted for a different approach by creating a custom element with named view slots and an abstract view model. While this approach worked initially, I encountered an issue where manipulating the list would cause the slot contents to stop updating.
I am seeking advice on how to achieve my goal in a more efficient manner. Any assistance or suggestions would be highly appreciated.
Side Note: I tried to create a simple Gist to demonstrate the problem, but it appears that the latest CDN version does not support view-slots yet (I was unable to get it to work).
In essence, what I am trying to accomplish is similar to the following setup:
list.html
<template>
<div>list: ${counter}</div>
<slot></slot>
<button click.delegate="load()">Increase counter</button>
</template>
list.ts
import { autoinject } from 'aurelia-dependency-injection';
import { customElement } from 'aurelia-templating';
@customElement('list')
@autoinject
export abstract class List {
public abstract counter;
public abstract load();
}
resource.html
<template>
<require from="./list"></require>
<list>
<div>resource: ${counter}</div>
</list>
</template>
resource.ts
import { autoinject } from 'aurelia-dependency-injection';
import { List } from './list';
@autoinject
export class App extends List {
public counter = 0;
constructor() {
super();
}
public load() {
this.counter++;
}
}