3

Wondering if anyone has tried to turn a piece of markup returned by a server into a reusable Aurelia template?

Let me explain what i'm talking about using a simple example. Let's say a sever renders a page with a list of products for a category. Once a page is loaded i'd like to reuse the markup representing a single product and render a list of products for another category using Aurelia's repeater. I'm looking for a way to enhance a page behaviour without duplicating a markup on client side.

So let's say a server returns something like that:

<ul>
<li class='item'><div>Item content</div></li>
<li class='item'><div>Item content</div></li>
</ul>

I want to turn <li> element into Aurelia template so i can use the markup to render another list of items using Aurelaia repeater with data loaded dynamically.

I have few ideas how to implement it i.e. extracting the markup from loaded page and passing it to custom-element implementing InlineViewStrategy.

I'm curious how other people would approach that problem.

UPDATE:

So currently I've added a new custom attribute 'as-template' which extracts the markup of decorated element and saves it as a 'item' template. Later on in a custom element I retrieve this saved markup and compile it using ViewCompiler. 

<ul>
<li class='item' as-template="item"><div>Item content</div></li>
<li class='item' as-template="item"><div>Item content</div></li>
</ul>

Sample compilation snippet (not my actual code)

let view =viewCompiler.compile('<template>templateMarkup</template>',viewResources).create(container);
    view.bind(context);
    viewSlot.add(view);
    viewSlot.attached();
tszarzynski
  • 604
  • 7
  • 15
  • so in effect you want to parse a html document, match up some regex and replace those with some binding and pull out the values to put in a model? There are a couple of issues really; if you have control of the server API, then add on the ability to return templates directly. If you don't have access to the server API then potentially any mechanism you use to extract data could fail at any point in time. – Meirion Hughes Jun 01 '16 at 09:44
  • Not really... i don't want to extract the data... I just want to extract the markup and turn it into Aurelia's template so i can use it later on with data loaded from web api... – tszarzynski Jun 01 '16 at 10:02
  • So the markup returned from the server is actually a template (or could be), you just want aurelia to use it? If not, it would be helpful to the question to have an example of what is returned from the server and an example of what you want it converted to. – Meirion Hughes Jun 01 '16 at 10:23
  • Yes... that's more like it... the markup returned is not the template yet but i want to use it as template later on. I'm currently working on a solution. What i'm doing is I created a new custom attribute 'as-template'. If Aurelia detects that it extracts it and makes it available for other custom elements to compile it if necessary using ViewCompiler. That's my current approach. Seems to work. Just not sure if that's the best one. – tszarzynski Jun 01 '16 at 11:06
  • please consider answering your question yourself and marking as answered – Alexander Taran Mar 12 '18 at 10:52

0 Answers0