How to include external html & properties inside main html ? #840

GalinhaLX · 2022-04-28T20:55:09Z

GalinhaLX
Apr 28, 2022

Hi

I would like to know if someone already tried Mavo as some kind of 'template engine':

I'm trying to split some html sections of my mavo main page, into external html files, using 'mv-if'

It works fine using this method here

main.html

<head>
    <title>Main.html</title>

<!-- html include needs to be loaded before MAVO ! -->
    <script type="module" src='https://unpkg.com/html-include-element'></script>

    <link rel="stylesheet" href="https://get.mavo.io/stable/mavo.min.css">
    <script src="https://get.mavo.io/stable/mavo.es5.min.js"></script>
    
</head>

<body>

<div mv-app="appName">

    <div property="name">John doe</div>

    <div mv-if="name">
        <html-include src="template.html"></html-include>
    </div>

</div>
</body>

template.html
<div>How are you [name] ?</div>

=> External template is included , 🎉
😓 EXCEPT I'm not able to see the property value
(I also tried to declare property inside the template.html file, but it doesn't work)

I also tried to register the new element, including following script into main.html (sorry I'm not a javascript expert, so I tried to reproduce something like @DmitrySharabin on this codepen

<script>
    (function() {
	Mavo.Elements.register({
		"html-include": {
			selector: "html-include",
			init: () => {}
		}
})();

</script>

but it stills doesn't work...

I'm I missing something like

registering a "changeEvents" (which in this case, i don't understand which one to register :(
using <slot>
using root data

=> Beyond my question, I would like your opinion on the feasibility of the concept of including external html blocks with properties described in these external blocks, simply with mavo

or if you think, to deal with this point, that we should go for a server side template engine, or use Mavo-SSR

Thanks for your help and comments

GalinhaLX · 2022-05-01T03:51:46Z

GalinhaLX
May 1, 2022
Author

Hi

For information, I've been able to include external html file and pass Mavo properties to it this way:
(sorry, as I don't know how to use external file in codepen, I paste the code here)

main.html

<head>
    <script type="module" src='https://unpkg.com/html-include-element'></script>
    <link rel="stylesheet" href="https://get.mavo.io/stable/mavo.min.css">
    <script src="https://get.mavo.io/stable/mavo.es5.min.js"></script>
</head>

<body>
    <div mv-app="appName">
        <div property="name">John</div>

        <div>
            <html-include src="./template.html">
                <div slot="user">[name]</div>
            </html-include>
        </div>
    </div>
</body>

template.html
<p>hello [name] - <slot name="user"></slot></p>

=> This works,

=> except you'll not be able to edit with Mavo the properties inside the template file (Would it be connected to #836 ? )

My research was in the sense that I was looking to unload the main html page size, using external html templates, which would be loaded only under mv-if conditions

This is, I think, an interesting feature to have in the future with Mavo

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to include external html & properties inside main html ? #840

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to include external html & properties inside main html ? #840

GalinhaLX Apr 28, 2022

Replies: 1 comment

GalinhaLX May 1, 2022 Author

GalinhaLX
Apr 28, 2022

GalinhaLX
May 1, 2022
Author