Template Parts about templating

[akircher]

Can we simplify the majority of cases that likely have only one template? For these cases with only one "part", could we have omit the part's name (i.e. just the attribute being present is enough)? Or even better, could we have <content> instantiate a passed template automatically?

my-element

<template>
  <ul>
    <li repeat.for="item of items">
      <content></content>
    </li>
  </ul>
</template>

Then the consumer of "my-element" could write this:

<my-element items.bind="people">
  <template>${item.firstName}</template>
</my-element>

[EisenbergEffect]

You are using the content tag which is part of the Web Components spec and cannot be used like this. Template parts are explicitly designed to solve a different set of scenarios which aren't covered by the WC spec. We cannot alter the behavior of the content tag.

Can we have default part replacement? I'm not sure. There are legitimate reasons for using a template inside the content of an element where it is not intended to replace a part of the element's view. We would have to have a 100% sure way to differentiate the two scenarios.

[akircher]

I am not an expert on the Web Component Spec, but wouldn't the content tag pull in the template. Aurelia - as part of the binding process - then just has to initialize all uninitialized templates using my-element's context. If you are worried about someone passing a template that they don't want initialized you could use some sort of attribute marker <template replace></template> and only initialize those templates.

[EisenbergEffect]

No, that would not work because you placed the content tag inside a repeater. Imagine how that would work at runtime. You would end up with a content tag in the dom for every item in the array. According to the spec then, the contents of the element would then be rendered inside the first content tag only. This would result in a random template tag being rendering at the location of the first content tag in the first array item. That is not the behavior you want, but that is what would happen, according to the spec. The reason is that the WC spec is written with no notion of any type of templating language, so it doesn't account for things like repeaters which would require a different set of behavior.

To cover the scenarios that the WC spec doesn't we had to introduce the template parts, which do understand repeaters, ifs and any internal custom templating mechanisms.

[EisenbergEffect]

FYI, I do agree with you that this should be possible. But, the spec wasn't written to handle these types of scenarios which exist in real apps. We can't alter the spec of the behavior of these entities, so we had to introduce template parts to solve the problem. It's not ideal. I wish there could be a single mechanism, but I don't think it's possible.

[akircher]

Thanks Rob for being so responsive! You are right a single mechanism would prevent developers from needing to remember when to use which feature and the inevitable errors from when they use the wrong one. You may have already considered these, but here are three ideas.

1. Use importNode to initialize <content> before you run repeaters or other template controllers. Only after the correct content is inserted do you run the template controllers / interpolation.

2. Override/replace <content> manually. Just like you do part = templateOrFragment.getAttribute('part'); simply select the content element, replace the content manually (including initializing any imported templates), and avoid the web spec altogether when you activate the template since <content> is now gone.

3. Tell developers to forget <content> altogether and always use part/replace-part ( or bikeshedding <au-content> or <replace>). This may already be the case, but the solution would need to work for all transclusion use-cases not just for templates. This includes being able to import an unnamed default e.g., use <replace></replace> to insert everything or <replace part="item-template"> to be more selective.

[nyxtom]

@EisenbergEffect What would be a good way to ensure that part="${key}-template" works as expected?

[EisenbergEffect]

That isn't expected to work. Template Parts and their overrides must be statically defined. You would need to build something custom if you want dynamic part replacement.

[vegarringdal]

Is there any any attribute I can add to a template tag that tells aurelia not do do anything with it?
I want to take that part out myself, and process it with viewCompiler

[EisenbergEffect]

You could create a template controller custom attribute. See the cheat sheet and give it a try to see if that will work for you.

[vegarringdal]

Page using it my custom element uses it like this;
<v-grid> with 1 <v-grid-row> that have<v-grid-col>'s
<v-grid> is the only custom element, how I take out the attibutes etc isnt the best way, but improving everything as I learn more about aurelia.
Atm(started yesterday) Im replacing a lot of code in my row generator, using view compiler, view slots for each row, all going very well.
But in one part of my grid where user havent added <v-grid-col> I've been taking all the innerHTML and repeating it.
This was not a issue before since I used mustache tags for data {{}}, now that I want to do it more aurelia style, I need to get that innerHTML before aurelia messes with it

<v-grid ///x attibutes here>
   <-v-grid-row>
      Inside here I use <v-grid-col> elements for columns
      If that isnt used here I really want to just take innerHTML of <v-grid-row>  
      and use viewCompiler and create my own rows (viewfactory/viewslots)
      So is there a way I can get the normal inner html that aurelia havent messed with?
  </-v-grid-row>
</v-grid>

Looked template controller custom attribute, but that will be a own attibute, didnt really see how I could use that, is there a way I can pass data/html markup from that attribute to the vgrid custom element context, so I can use view compiler, create a new viewslot for each row and bind it the context I need?

I have MANY parts I can improve in my grid, just would like to figure the parts out first, since Im going to want a option for custom build up for a column later too.

[EisenbergEffect]

Have you looked at the process content decorator?
On Apr 24, 2016 7:05 AM, "vegar ringdal" [email protected] wrote:

Page using it my custom element uses it like this;
with 1 that have's
is the only custom element, how I take out the attibutes etc
isnt the best way, but improving everything as I learn more about aurelia.
Atm(started yesterday) Im replacing a lot of code in my row generator,
using view compiler, view slots for each row, all going very well.
But in one part of my grid where user havent added I've been
taking all the innerHTML and repeating it.
This was not a issue before since I used mustache tags for data {{}}, now
that I want to do it more aurelia style, I need to get that innerHTML
before aurelia messes with it

<v-grid ///x attibutes here>
<-v-grid-row>
Inside here I use elements for columns
If that isnt used here I really want to just take innerHTML of
and use viewCompiler and create my own rows (viewfactory/viewslots)
So is there a way I can get the normal inner html that aurelia havent messed with?
</-v-grid-row>

Looked template controller custom attribute, but that will be a own
attibute, didnt really see how I could use that, is there a way I can pass
data/html markup from that attribute to the vgrid custom element context,
so I can use view compiler, create a new viewslot for each row and bind it
the context I need?

I have MANY parts I can improve in my grid, just would like to figure the
parts out first, since Im going to want a option for custom build up for a
column later too.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#70 (comment)

[vegarringdal]

Well my main <v-grid> element uses:

@noView
@processContent(false)

Because it does not have a view and I pretty much build everything, maybe I need to make a own custom element for the
<v-grid-row> and
@processContent((compiler, resources, node, instruction) => { //something } ?

Like I said Im doing a kinds of wrong in my grid, and improving as I learn more and more about aurelia. This is the working element Im rebuilding a lot on, https://github.com/vegarringdal/vGrid/ to use the viewslots/viewcompiler on.

I thought that the processContent was for processing the content of the internal view if it had any.
like if my element had a html file also.

I guess what Im looking for a a way to tag a template tag so aurelia just does not touch it at all if possible, so I can take that part of the page and compile it my self, create a view and repeat/bind it for each row

[vegarringdal]

now I kinda got it to work... so no need to answer me
problem is bacuase Ive done so much weird stuff, during bind of the vgrid element, I can get it, and looks like because I had a customAttribute decorator on the vgrid element that is the reason why I never understood the bindales, ang why I ended up using getAttribute.
So got a lot to refactor change, and if it a fails after this Ill ask again :-)

[EisenbergEffect]

Process content allows you to inject custom code during compilation to process whatever content the developer places inside the element. So, you can use this to transform child elements into other structures, for example.

[vegarringdal]

ok thanks, Ill have a closer look into that.

[davismj]

This seems to work only for the element with the repeat.for. In the following example, "item-template" can be swapped, but "title-template" and "content-template" cannot.

  <template repeat.for="item of items" part="item-template">
    <div class="title" part="title-template">
      <i class="dropdown icon"></i>
      ${item.title}
    </div>
    <div class="content" part="content-template">
      <p>${item.content}</p>
    </div>
  </template>

Gist here: https://gist.run/?id=0523e813ad49007bfb9750ffbcc57da9

[EisenbergEffect]

You need to add the replaceable attribute to anything with a part that isn't already a template controller.

[davismj]

Confirmed. Thanks. https://gist.run/?id=40739cf91eb2d23cb1c3f205271dae3e

[ajayvikas]

as per this article Getting Prepared for Aurelia 1.0.0-rc I thought replaceable has been removed. Is it back in?

[EisenbergEffect]

Yes. There were a couple of use cases that still helped out with.

On Aug 8, 2016 3:55 PM, "ppn2" [email protected] wrote:

as per this article Getting Prepared for Aurelia 1.0.0-rc
http://blog.durandal.io/2016/06/08/getting-prepared-for-aurelia-1-0-0-rc/
I thought replaceable has been removed. Is it back in?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#70 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAIBnT3KLsWC5Yy7J926iAmRkmBCD2hHks5qd7PKgaJpZM4ES3sS
.