Allow user to provide customized template for component rendering

1

I’m trying to solve a tricky problem, so I’ve made a twiddle to demonstrate it:

Here’s my problem, basic idea is to allow consumers define template of each selection and selected item for component, so I exposed the each selection for {{auto-complete-datalist}} and current selected item for {{auto-complete-input}}. Since we need to control how to render them (use customized HTML tags), so I have to use a div with contenteditable=true.

Now, you can focus in the input, select an option, then display the result as user defined form. But! you can’t DELETE the current selected item! because if you do that, you will also delete the customized template, so it won’t show again after deletions.

I don’t know how to archive this goal, many similar plugins will use a template option which allow user to provide a string HTML fragment, the plugin will render this at the runtime. It seems like a accept way but I don’t know how to allow consumers provide a string HTML template with handlebars tags in it?

How will you make this happen? Any suggestions will be appreciated.

2

It’s not just delete the input content. Even if you just modify the content, that piece just stop getting change.

I think the problem could be in contenteditable. You are editing the DOM directly and that could mess with HTMLBars’ morph nodes. So what we need is to teardown the inner DOM completely (bypass whatever Glimmer is doing) and rerender the whole thing. There may be performance overhead, but I think it’s very minor since you’re not rendering a big piece.

Take a look Ember Twiddle

3

Thank you very much, now I clearly understand how it works!