Copy/reference html throughout a view

Sometimes I need a part of html to show in multiple location on a single page/view.

Anyone know of any easy solution to have a reference to a html part in a view, and slot it into multiple different locations in that same view? Like a custom-element(html-only), but defined at top of the view, and only usable in the current view.

<div>
I want to take this part, defined in top of view
with this ${variable} 
and this <button click.delegate="method()">BUTTON</button>
</div>
...
<div> and copy/reference it here </div>
...
<div> and here </div>
...
<div> and maybe here </div>

Like a html version with binding of the ‘let’ custom element:

<let do-something-btns.bind>
 <button click.delegate="doSomething()"></button>
 <button click.delegate="doSomethingElse()"></button>
</let>


<div class="somewhere-top-of-view">
  <template innerhtml.bind="doSomethingBtns"></template>
</div>
<div class="somewhere-bottom-of-view">
  <template innerhtml.bind="doSomethingBtns"></template>
</div>

2 Likes

Hi @sondr , this is available in Au2 with the name “local template”: https://docs.aurelia.io/app-basics/components-revisited#local-templates. However, if you are working with Au1, there is no equivalent, as far as we know other than creating a custom element for that (and of course you can create HTML-only custom element).

Edit: With Au2 local template, the scope of the parent is not yet shared. When using that, you need to use the <bindable>s explicitly, to pass on values.

4 Likes

Exactly what I need :slight_smile:

Planning to upgrade to au2 when it hits release, so I’ll tidy up my code with local templates as well while upgrading.

Thanks for the info, au 2 looks very promising :slight_smile:

3 Likes