CustomElement using processContent Decorator

1

I want to create a CustomElement in which there is no view. The element itself handles the rendering.

I have been looking at processContent decorator. Is there a way to pass data to my process method?

for example:

<my-custom-element data.bind=“myData”></my-custom-element>

I need to access the data in my processContent method. The resulting html is dependent on the data.

1 Like
2

processContent happens during templating phase, while data binding happens during … data binding phase. So you cannot access the data in process content.

Your scenario sounds like you wanna manually do everything, so there are a few options for you

  • @fkleuver has created a plugin (read custom element) that helps you handle this kind of scenario https://github.com/aurelia-contrib/aurelia-dynamic-html
  • use @noView or @inlineView with only <template></template> and copy the logic in that dynamic html plugin and do everything yourself, for your own extensible-ability and exercise :smiley:
3

thanks for the quick reply.

I already looked into the aurelia-dynamic-html plugin but it does not work in IE.

4

perhaps there is already a way to do what I need and I am not aware of it or just can’t think of it.

The data I have is hierarchical. I need to walk through the data using recursion and create the html as needed. Is there a way to do this without using something like the aurelia-dynamic-html plugin?

1 Like
5

Does “walking through the data using recursion and create the html as needed” mean you build html as string or DOM elements using DOM API, based on your data and then create a view and attach to the custom element:

<my-ultra-dynamic-custom-element>
  <!-- all the dynamic view goes here -->
</my-ultra-dynamic-custom-element>

If so, I think it’s what aurelia-dynamic-html can also do, but it requires a little bit of wrapping and unwrapping. In case you don’t wanna use aurelia-dynamic-html and you wonder how to do everything by yourself, there is this example, can you have a look to see if it helps?
https://stackoverflow.com/questions/47509171/how-to-dynamically-enhance-html-with-aurelia/47644938

6

It is really not a question of whether or not I want to use the aurelia-dynamic-html plugin. I can’t use it. It is not supported in IE. Unfortunately I still have to support IE since so many people use it. If aurelia-dynamic-html is supposed to work in IE, please let me know because that would mean I was doing something wrong or was missing something.

I took a look at the link you provided. Seems a bit much. I need to think about whether or not I need to go down a different road all together.

1 Like
7

May I know what error you got running it on IE11? Can you help paste the code? I don’t think aurelia-dynamic-html is using anything that is incompatible with IE11, but maybe you are encountering edge cases.

About your case, I’m pretty sure it’s doable.

8

I was trying to use the plugin as a solution for a different problem. I ended up coming up with a different solution and removed the plugin code.

I will try to use the plugin to solve this problem. If I run into issues with IE I’ll post it here.

1 Like
9

Now I remember what the issue was when trying to use the aurelia-dynamic-html plugin in IE 11. Below is the error I see in the console:

Syntax Error
vendor-bundle.js (11429,19)

‘SystemJS’ is undefined
index.html (18,13)

The only thing I did is install the plugin and added “aurelia.use.plugin(“aurelia-dynamic-html”);” to my main.js file. I haven’t tried to actually use the plugin anywhere.

The plugin works fine in Chrome, FF and Safari.

10

Well, I decided to try to go down the road suggested by the url you gave me - https://stackoverflow.com/questions/47509171/how-to-dynamically-enhance-html-with-aurelia/47644938. However, I don’t think there is enough documentation at the level needed to do something like this on my own. I am surprised that no one has ever needed to display hierarchical data with Aurelia (or perhaps they decided not to target IE 11).

Is there any way that I could get some assistance in at least getting something started? I am just not sure where to start. Is there an example of a CustomElement in which more fine tune control over the html is needed?

1 Like
11

You can DM me on gitter https://gitter.im/bigopon
You can DM me here

I’m happy to help, hand holding is ok too :smiley:

1 Like