search

supermedium / superframe

:package: A super collection of A-Frame components.
https://supermedium.com/superframe/
MIT License
1.37k stars 424 forks source link

[template] Is it possible to use external templates as assets? #187

Open dsinni opened 6 years ago

dsinni commented 6 years ago

Hi again! :D

Is it currently possible to use an external template file as an A-Frame asset?

I figured there was added benefit to having the templates defined as assets, but have not seen it working with an external file.

Here are some of the things I've tried:

index.html:

<a-assets>
  <script id="red-ball" src="./templates/red-ball.template" type="text/html"></script>
  <!-- 
  <script id="red-ball" src="./templates/red-ball.html" type="text/html"></script>
  <a-asset-item id="red-ball" src="./templates/red-ball.template" type="text/html"></a-asset-item>
  <a-asset-item id="red-ball" src="./templates/red-ball.html" type="text/html"></a-asset-item>
  -->
</a-assets>

<a-entity template="src: #red-ball" position="0 1 -3"><a-entity>

red-ball.template || red-ball.html:

<a-entity geometry="primitive: sphere;" material="color: red; roughness: 0;"></a-entity>

It works if I embed the code locally in the script tag or if I use the source directly (template="src: ./templates/red-ball.template") , but this can get messy if there are a lot of templates or if there is a complex directory structure. Also, not sure if there is a downside to the latter since they are not defined as assets.

Any guidance would be great. Thanks, Kevin.

dsinni commented 6 years ago

Code: https://glitch.com/edit/#!/lake-squid

Demo: https://lake-squid.glitch.me/

Note that the red ball is not appearing.

dsinni commented 6 years ago

So, I realized that I could set a template as a mixin, which occurred to me when I was considering object pooling and seems to do what I was asking in the original question regarding having external templates as assets:

<a-mixin id="ball" template="src: ./templates/ball.html;"></a-mixin>

However, if I add a data attribute like data-color="red" to the mixin definition, it fails completely and throws an error:

TypeError: Unable to resolve expression:
    args: ""
    body: "color"

If I add it to the entity utilizing the mixin:

<a-entity mixin="ball" data-color="red"></a-entity>

That works and the color takes, so this may suit my needs for now.

If you have a minute, I'd love your input on whether or not this is a good practice.

Thanks.

Code: https://glitch.com/edit/#!/rainy-chinchilla

Demo: https://rainy-chinchilla.glitch.me/