Is it possible to pass parameters into templates?

[robinchesterman]

When using Fast Element, I would like to split some templates into sub-templates, and render them conditionally. It's not clear to me what the correct syntax should be, or if this this an anti-pattern.

class SomeModel {
    type: "A" | "B"
    options: OptionsA | OptionsB
}

type OptionsA = {
    propX: string;
}

type OptionsB = {
    propY: string;
}

const templateA = html<OptionsA>`${x => x.propX}`;
const templateB = html<OptionsB>`${x => x.propY}`;


export const parentTemplate = html<SomeModel>`
      <div>
        ${when(x => x.type === "A", templateA)} // how to pass in x.options?
        ${when(x => x.type === "B", templateB)} // how to pass in x.options?
    </div>
`;

[EisenbergEffect]

Unfortunately, the pattern above isn't supported out-of-the box exactly as described. You would have to change your templates to accept the full model.

It is possible to write a custom directive to do this, but it's not completely trivial. I have a render directive that lets you pass the part of the model as an expression and then a template to use for that as well. It supports a number of other features. You can find that in this gist: https://gist.github.com/EisenbergEffect/281efd9ae96ad1439f2eb95ee745fd47 You just need the render.ts file. The rest of the files show examples of how to use it.

I think this scenario, as well as a few related scenarios, are very common in application development. I needed this myself when I was working on a side-project, which is what led me to create the gist above. I think it's common enough that we should provide this out-of-the-box. So, I've written up an rfc, which I could probably start working on tomorrow or next week. Have a look at that and let me know what you think: #6114

[EisenbergEffect]

I just thought of a temporary hack, in case you don't want to use my gist.

repeat(x => [x.options], x => x.type === "A" ? templateA : templateB)

I think that should work. It's not as efficient as the new directive I'm working on, but I think it should get the job done. The PR for the new directive is here: #6127 If desired, I can back port this to v1 and update my gist with that.