Using Template7 Inside Framework7

Questions
1

Hello,

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"
      });
      console.log(html)

and

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

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

2

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?

3

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

\{\{firstName\}\}

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

4

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>
5

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.