Template7 won't work with framework7

Questions
1

I just can’t understand where I am going wrong. I have used template as standalone without issues but on framework7, it does not just work, despite trying several tutorials; I must be missing something.

Here is my code

  <div class="view view-main">
    <!-- Initial Page, "data-name" contains page name -->
	<div data-name="home" class="page">

      <!-- Top Navbar -->
      <div class="navbar" style='background-color: #2086ae;'>
        <!-- NAVBAR -->
      </div>

      <div class="toolbar toolbar-bottom-md custom" >
		<!-- TOOLBAR -->
      </div>
      <!-- Scrollable page content -->
      <div class="page-content " >
        Template7

        <script type="text/template" id="show-template">
          <p>Here are the list of people i know:</p>
          <ul>
            {{#each people}}
            <li>{{firstName}} {{lastName}}</li>
            {{/each}}
          </ul>

				</script>

	  </div>
    </div>
  </div>
2

And where do you compile and execute this template?

3

Oups, I thought I had included that, sorry here it is:

/* JS CODE */
var app = new Framework7({
// App root element
root: ‘#app’,
// App Name
name: ‘My App’,
// App id
id: ‘com.myapp.test’,
// Add default routes
routes: [
{
path: ‘/index/’,
url: ‘index.html’,
}
],

});

// DOM
var $$ = Dom7;

var template = $$(‘script#show-template’).html();

// compile it with Template7
var compiledTemplate = Template7.compile(template);

// Now we may render our compiled template by passing required context
var context = {
people : [
{
firstName: ‘John’,
lastName: ‘Doe’
},
{
firstName: ‘Mark’,
lastName: ‘Johnson’
},
]
};

app.on(‘pageInit’, function(page){
console.log(‘context’, context);
var html = compiledTemplate(context);
});

/* JS CODE END */

context logs in console well, but template script does not display.

The above html script is on index.html page (landing page)

4

I can’t see you put the compiled html anywhere, it should be something like:

app.on(‘pageInit’, function(page){

  var html = compiledTemplate(context);
  $$('.something').append(html);
});
5

Thanks a great deal, I really missed to append the compiled template.

I have another issue, I have loading the data via an ajax request but the data will not load on a popup.
Only the index page seems to load it.
What can I do to load this ajax request on a popup compiled with template7?

6

Didn’t get what issue do you have?

7

Thanks so much for your assistance, I was able to proceed. The issue was with a popup not loading new data. I was looking for a way to refresh a popup after display (I tried the destroy method on close, but it couldn’t help) I guess this is not appropriate on this topic?