Require Template in View-Model and convert to Raw HTML

Help Requests
1

I have an instance using Select2 that allows me to render a template for the results. Right now we are writing our HTML in strings and I’d like to put it in a HTML Template and require it somehow. If I can preserve binding behaviors that would be awesome. Does anyone have any ideas?

2 Likes
2

Can you provide some pseudo code examples?

3

In the view-model we pass in options to a select2 instance:

const select2Options = {
    templateResult: item => { return `<div><span>${item}</span></div>` }
}

Where I’d like to require the template instead of using raw strings:

import Select2Template from './select2-template.html'

const select2Options = {
    templateResult: Select2Template
}

With the template declaring the binding values:

<template bindable="item">
    <div>
        <span>${item}</span>
    </div>
</template>

Even if I have to construct the template with a callback function, that would be fine because it would allow me to create more manageable code.

1 Like
4

I think it’s similar to what the aurelia dynamic html component can do, or at least I hope so. Can you have a look at that plugin?

5

I looked at that component but, that is just a custom element that takes raw strings and renders them. My goal is to get away from raw strings and require a template.