Dynamic user driven display

Help Requests
1

Hello, I’m wondering if there is a way that I can build a html editor, and allow the user to reference dynamic values using the aurelia string interpolation syntax.

For example, a textarea that looks like this:

image

This would output the following html:

<p>Initial Content!</p>
<p>${row.some_fieldname}</p>

Then we could pass this html to aurelia with a scope value for row to get the html rendered correctly.

Is this possible? Also is it safe? Just looking for options at this point, maybe it would be better to use a different templating library for this.

2

I think you might want to use some readily available rich text editor for that. Usually, the rich text editors provide you with an HTML output at the end. You can take this HTML output and treat that as the “host” for enhanceto dynamically generate a view that’s bound to a scope.

3

Hi @Sayan751, I do understand the rich HTML editor part, the part I’m stuck on is taking that HTML that the user typed in and passing it to Aurelia to render dynamically. Like the ${row.field_name} placeholders.

Or would it be better to use a template library like handlebars to do this?

4

More context may be helpful.

I’m storing the HTML that the user enters via the rich text editor in a database, so the HTML gets dynamically fetched to be rendered in a list component. The list is rendered in a div using repeat.for a list of objects. Each list item would be rendered with the html that the user provides via the text editor.

I’m trying to figure out how to take the dynamic html and render it via the array of objects and the custom user submitted html.

5

In your place, I would have done the following:

  • Create a custom element (CE) that accepts a template string and a binding context or scope.
  • That CE is responsible for the following:
    • Parsing the template string to a DOM tree. Don’t worry about the Aurelia syntax for this part, and simply use the standard DOMParser.
    • Enhancing the DOM tree with the bound context, using the templatingEngine.enhance(if you are unaware of that, search for that in the docs). This step will hydrate the DOM tree with Aurelia magic.
    • Attach the enhanced DOM tree to the view, and you are done.
    • Well almost. Make sure to clean up properly when this CE goes out of context (unbound, detached etc.). For that, you can refer this thread.
  • Use the CE in your list and bind the template and the context as deemed fit.
1 Like
6

Is there a way to add such a runtime-element to aurelia’s [current page] registry of custom elements post-bootstrap? That way they can easily become reusable components.