Using Template7 Inside Framework7


I am attempting to use Template7 inside Framework 7, I added

import Template7 from 'template7';
window.Template7 = Template7;

to my app.js. Then added:

      var searchTemplate = $$('script#search-template').html();
      var compiledSearchTemplate = Template7.compile(searchTemplate);
      var html = compiledSearchTemplate({
        firstName: "John"


        <script id="search-template" type="text/template7">
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">{{{firstName}}}</div>

From the documentation. However, none of the variables I’m entering are being rendered. The {{}} are just replaced by nothing.

I believe I know what’s causing the issue. Framework7 is rendering the brackets when I open the view so the client Template7 doesn’t see any brackets. Is there any way to prevent Framework7 from rendering them?

SOLUTION: use the backslash () inside the brackets like this:


To prevent Template7 from rendering it, then you can render it inside the client side app JS.

The backslashes shouldn’t be needed, did you notice you entered three opening/closing curly braces instead of two? This might cause the problem of rendering.

<div class="item-title">{{{firstName}}}</div>

Yeah, I did notice that, however, that was only because I was testing it.

My point is, if you want to use rendering after the page inits, you will need to use backslashes. Unless you have a better solution.