Welcome, Guest

Author Topic: HTML Import and templates  (Read 650 times)

Fa

  • Posts: 7
    • View Profile
HTML Import and templates
« on: January 09, 2018, 05:37:28 AM »
Hello,

I am trying to use the <link rel="import" > tag to import html file that contains a template, but it doesn't seem to work.

main.html:
Code: [Select]
  <link rel="import" href="menuButton.html"/>

menuButton.html
Code: [Select]
 

<template id="MenuButtonTemplate">
    <div class="mainFrame MenuButton">
        <div class="title"> </div>
        <div class="desc"> </div>
        <img class="img" />
    </div>
</template>


If I use the debugger, the template doesn't appear in the document's head.
However, scripts tags that are in menuButton.html are correctly imported.

Is there a way to define templates in an imported html file ?

john.v

  • Administrator
  • *****
  • Posts: 76
    • View Profile
Re: HTML Import and templates
« Reply #1 on: January 09, 2018, 08:04:34 AM »
Hi Fa,

The template importing feature is not supported in WebKit out of the box - https://webkit.org/status/#specification-web-components.

That being said, you could instead use our data-binding system to register HTML templates. For example, you could define a template in another html file, like this: <script type="text/html" data-bind-template-name="myTemplate">. After importing that file, you can use the template anywhere via data-bind-template="myTemplate".

You can visit http://coherent-labs.com/Documentation/cpp-gt/dc/df4/sample_components.html to find out more about this functionality.

John V,
Support Engineer at Coherent Labs

Fa

  • Posts: 7
    • View Profile
Re: HTML Import and templates
« Reply #2 on: January 11, 2018, 01:12:40 AM »
Hi,
Thanks for the answer.

I am surprised when you say it is not supported, as the blog talks about this :
https://coherent-labs.com/web-components/

Is it something planned for the next version ?

john.v

  • Administrator
  • *****
  • Posts: 76
    • View Profile
Re: HTML Import and templates
« Reply #3 on: January 11, 2018, 09:20:14 AM »
Hi Fa,

The HTML <template> element itself is supported in Coherent GT. However, HTML imports are not yet part of the HTML standard. The W3C committee is facing resistance from Mozilla (if you’re curious, you can read more about it here https://hacks.mozilla.org/2014/12/mozilla-and-web-components/). Because of that, the WebKit team has also decided to not implement them, and consequently, they are not supported in Coherent GT too. The reason you are seeing resources being loaded at all is that we ourselves are fans of that syntax and are using it for our component system.

Aside from our data-bind-templates, there are other alternatives to HTML imports - for example, you can write some JS code that finds all <link rel="my-import"> tags, fetches the page and inserts their documents in the current one. This will cause GT to parse the newly added elements and allow you to use the <template> tags from other documents.

Hope this makes it clearer!

John V,
Support Engineer at Coherent Labs
« Last Edit: January 12, 2018, 09:47:35 AM by john.v »

Tags: