SonicC SonicC - 1 month ago 10x
HTML Question

Is that possible to put Template7 code in a separate file rather than in html

I am using a framework called Framework7.

In my index.html, I have some Template7 code, like this format

<script type="text/template7" id="commentsTemplate">
{{#each this}}
<div> test this template 7 code </div>

However, I want to have this part of code into an another separated file (Just like I can have many other *.js files in, say, a static folder and refer to the file by "static/*.js).

I have tried to use a typical way to import js

<script type="text/template7" id="storiesTemplate" src="js/template.js"></script>

But it doesn't work, there is also no demo/sample code in the documentation.

Any help is appreciated!


It is possible to define your templates in .js-files. The template just needs to be a string. Refer to this [JSFiddle] ( and note the difference between 'template1' and 'template2'

var template1 = $$('#template').html();
var template2 = '<p>Hello, my name is still {{firstName}} {{lastName}}</p>'

template1 just extracts the content of the <script> and puts it in a string. template2 directly defines the string