[solved] Dynamic Componets Using Global Resources

Help Requests
1

I’d like to build a table where I can just specify an array of rows and the column headings. In each cell, it should display the data dependant on what was specified as part of the column settings.

Column Settings:

[
    { key: 'name', label: 'The Name', type: 'string' },
    { key: 'dob', label: 'Date of Birth', type: 'date' }
]

Rows:

[
    { id: 1, name: 'Jack', dob: '1991-02-01' },
    { id: 1, name: 'Jill, dob: '1993-02-01' }
]

Date Component Usage

<date-format date.bind=“date” format=“calendar”></date-format>

Now in this example, I already have a custom component where I basically just bind in a date and it formats it using Moment or whatever else. Because I’ve added this component as a global resouce, is there a way I can just reference that using compose or some other dynamic way? Be nicer instead of having to try and figure out the relative path to the component dependant on where the table is being used.

Downside of compose is that it needs the relative path to the view model and the view itself.

2

As I can understand better…
Are you trying to create a custom element for a table?

3

Yes, so a table where I can specify what the columns are, by binding in the config for each column as well as the data itself.

I’ve gotten the whole thing working with just strings, but I would like to have some columns that are actually using other components rather than just a string.

4

So I’ve got it working. Turns out you can bind in a view model straight into compose instead of the path to it, which makes it really simple then.

// Custom View Model
@containerless()
@inlineView('<template><a route-href="route: route_name; params.bind: { id: row.id }">${row.name}</a></template>')
class ViewLink {}

// The View Model for the Compose container
export class Row {
   data = {
      viewLink: ViewLink
   }
}

<template>
<compose view-model.bind="data.viewLink" model.bind="row"></compose>
</template>