Dynamic components help

1

Say I have a sports game, and within the game is a messaging system where we receive a message string like so:

Hi there, I just purchased a new player <player id=1234>.

Let me know what you think.

I want to replace the <player id=> part with a component which grabs a player image, name, and other cool stuff which make a component necessary.

How would I go about solving this keeping in mind each message string can have an unknown number of tags of different types which we need to convert to components.

Help with this would be very appreciated as I’ve been struggling with this for a while.

2

I think it might be worth taking a look at Ember mobiledoc (wether to use in your case, or to get some inspiration) as it looks like there’s a feature where they can convert some markup into Ember components:

3

Thanks @Spencer_Price

I’ve been experimenting with something like this:

{{#each parts as |part|}}
  {{#if part.isComponent}}
    {{component part.component.name attrsHash=part.component.hash}}
  {{else}}
    {{{part.content}}}
  {{/if}}
{{/each}}

…where it’s backed by an array of objects with information about how to build each dynamic component.

However, where I’m stuck now is that sometimes each component needs to be wrapped by other html tags, such as <blockquote>, and ember (un)helpfully closes all open HTML tags at the end of each {{#each}} loop.

So with a backing array like (simplified):

[
  '<blockquote>',
  { component: { name: } ... etc. },
  '</blockquote>'
]

It renders as:
<blockquote></blockquote>{{component}}

Instead of:
<blockquote>{{component}}</blockquote>

Back to the drawing board I guess.

4

@Spencer_Price tell all you need. You also able to render dinamic components https://guides.emberjs.com/v2.5.0/components/defining-a-component/#toc_dynamically-rendering-a-component it allows you to render right components based in your content type.

5

I had made a post 2 days ago giving further info about how dynamic components still don’t cut it. But it was blocked by the spam filter. The spam filter promised it would be available “shortly”, however it still is not up.

Anyway, there is a technique I’ve been experimenting with where I break the original message up into parts - an array of both static content and component information - allowing HTMLBars to render the message template the ember way.

However! This falls short when we also need to surround components with other HTML. Say the given message is quoting another user and we need blockquote tags, containing one or more components which display other users in the game.

When I try to do this by including HTML in the aforementioned ‘parts’ array, HTMLBars automatically closes the open html tags too early. So I end with something like this:

<blockquote></blockquote>{{component}}

Instead of this:

<blockquote>{{component}}</blockquote>