aframe-template-component + nunjucks template showing in code but not appearing in scene

Question

I know very little about Nunjucks, so I apologise if I'm going completely in the wrong direction but this is my shot at using it in combination with aframe-template-component to produce 10 building entities in different positions.

I created this script tag in my index.html:

<script id="building" type="text/x-nunjucks-template">
  {% for x in range(0, 10) %}
    <a-entity template="src: building.template; type: handlebars"
              data-position="{{ x * 10 }} 1 0" 
              data-positionB="{{ x * 10 }} 1 0" 
              from="#frontInner{{ x }}" 
              to="#frontOuter{{ x }}">
    </a-entity>
  {% endfor %}
</script> 

I placed this entity in the scene:

<a-entity template="src: #building"></a-entity>

and I created a building.template file (with a simplified version of the building I want to create multiple versions of):

                    <rw-room data-position material="color:#866" width="4.8" length="4.8" height="3">
                        <rw-wall >              
                            </rw-wall>
                            <rw-wall >
                            </rw-wall>
                            <rw-wall >
                                <rw-doorhole id="frontInner{{ x }}" material="color:#866"></rw-doorhole>
                            </rw-wall>   
                            <rw-wall >

                            </rw-wall>
                            <rw-floor material="color:#870"></rw-floor>
                            <rw-ceiling material="color:#880"></rw-ceiling>
                        </rw-room>
                        <rw-room data-positionB material="color:#866" width="5" length="5" height="3" outside="true">
                            <rw-wall ></rw-wall>
                            <rw-wall ></rw-wall>
                            <rw-wall ></rw-wall>
                            <rw-wall >
                                <rw-doorhole id="frontOuter{{ x }}" material="color:#866"></rw-doorhole>
                                <rw-doorlink from to position="2.5 0 0" material="color:#866" >
                                    <rw-floor material="color:#866"></rw-floor>
                                    <rw-ceiling material="color:#866"></rw-ceiling>
                                    <rw-sides material="color:#866"></rw-sides>
                                </rw-doorlink>
                            </rw-wall>
                            <rw-floor material="color:#866"></rw-floor>
                            <rw-ceiling material="color:#866"></rw-ceiling>
                        </rw-room>

The code seems to be appearing in the console

One issue I noticed is that the id's aren't updating as they should, should be id="frontOuter1"

However the buildings are not appearing visually within the scene. Any advice on how to fix this would be greatly appreciated!

Answer 1

rw-rooms, rw-wall... are not A-Frame entities, they won't be rendered. Use a-entity and mixins instead of wr-XXX elements in your template. e.g:

<a-entity mixin="wall"></a-entity>

<a-mixin id="wall" material="color: red"></a-mixin>