Repetitive blocks

[oravecz]

If I have a repetitive block in my template (aka partial), is it possible to define it and reference it from multiple locations in the template?

[davidjamesstone]

I usually go with creating a separate child template, compile it to IDOM then pass it in to the parent. Using browserify with the superviewify transform it could look something like this:

child.html

<span>I'm from the child</span>

parent.html

<template args="data childView">
<span>I'm from the parent</span>
<script>
  childView(data)
</script>
</template>

main.js

const childView = require('./child.html')
const parentView = require('./parent.html')

patch(element, function (data) {
  parentView(data, childView)
}, data)

This works and is fairly simple but if you're looking for something more you could use customElements as part of the web components spec. skatejs is worth looking at. I works with IDOM, supports superviews.js and would allow you to simplify your code to:

<x-parent>
  <x-child></x-child>
  <x-child></x-child>
</x-parent>

Hope that helps?

[oravecz]

I'm actually using (prototyping) superviews from within custom components. These repetitive blocks are too insulated to require a full component; I just need a template partial. Ideally, I would have an HTML file containing my <template> that could call other templates from the same file. I would just have to specify the params passed into that "template partial".

…

On Sun, Feb 12, 2017 at 2:07 PM davidjamesstone ***@***.***> wrote: I usually go with creating a separate child template, compile it to IDOM then pass it in to the parent. Using browserify with the superviewify transform it could look something like this: *child.html* <span>I'm from the child</span> *parent.html* <template args="data childView"> <span>I'm from the parent</span> <script> childView(data) </script> </template> *main.js* const childView = require('./child.html') const parentView = require('./parent.html') patch(element, function (data) { parentView(data, childView) }, data) This works and is fairly simple but if you're looking for something more you could use customElements as part of the web components spec. skatejs <https://github.com/skatejs/skatejs> is worth looking at. I works with IDOM, supports superviews.js and would allow you to simplify your code to: Hope that helps? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#34 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AASK8Fq9z2Qh8dldK_n7rroXg4nFA4VTks5rb1hvgaJpZM4L93GX> .

[oravecz]

Something like this would be helpful in my use case.

template.html

<template name="child" args="item index">
    <span class="{index % 2 === 0 ? 'even' : 'odd'}">
        {item.name} :: {index}
    </span>
</template>

<template name="parent" args="items">
    <style>
        .odd {
            background-color: #ccc;
        }
    </style>
    <h2>Partial example</h2>
    <ul>
        <li each="item in items">
            { child(item, $index) }
        </li>
    </ul>
</template>

You could default to your current behavior in case of a single template in a file, but perhaps export either the last template when there are multiples, or export an object with each factory function exposed as a property.

Perhaps nested template tags would be cleaner in regards to how you export a single function.

<template name="parent" args="items">
    <template name="child" args="item index">
        <span class="{index % 2 === 0 ? 'even' : 'odd'}">
            {item.name} :: {index}
        </span>
    </template>
    <style>
        .odd {
            background-color: #ccc;
        }
    </style>
    <h2>Partial example</h2>
    <ul>
        <li each="item in items">
            { child(item, $index) }
        </li>
    </ul>
</template>

[rogi29]

I find it an issue as well, where I want to include multiple templates using an html like syntax to create modular components. Is there a possibility to extend the handler function, therefore allowing us to create custom tags like include or component?