I am using Template7 and Framework7 to build an iOS app using PhoneGap. I am going through the tutorial
my-app.js file
// Initialize your app
var myApp = new Framework7({
init: false
});
// Export selectors engine
var $$ = Dom7;
// Add view
var mainView = myApp.addView('.view-main', {
// Because we use fixed-through navbar we can enable dynamic navbar
dynamicNavbar: true
});
myApp.onPageInit('index', function (page) {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {}
});
myApp.init();
// Callbacks to run specific code for specific pages, for example for About page:
myApp.onPageInit('about', function (page) {
console.log('Baga');
// run createContentPage func after link was clicked
$$('.create-page').on('click', function () {
createContentPage();
});
});
// Generate dynamic page
var dynamicPageIndex = 0;
function createContentPage() {
mainView.router.loadContent(
'<!-- Top Navbar-->' +
'<div class="navbar">' +
' <div class="navbar-inner">' +
' <div class="left"><a href="#" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>' +
' <div class="center sliding">Dynamic Page ' + (++dynamicPageIndex) + '</div>' +
' </div>' +
'</div>' +
'<div class="pages">' +
' <!-- Page, data-page contains page name-->' +
' <div data-page="dynamic-pages" class="page">' +
' <!-- Scrollable page content-->' +
' <div class="page-content">' +
' <div class="content-block">' +
' <div class="content-block-inner">' +
' <p>Here is a dynamic page created on ' + new Date() + ' !</p>' +
' <p>Go <a href="#" class="back">back</a> or go to <a href="services.html">Services</a>.</p>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>'
);
return;
}
How do I use template7data in
myApp.onPageInit('index', function (page) {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {}
});
and load data in it from database or from some AJAX query. I want to use that data to display content on index.html file.
You need to have a template. For example:
<script id="template" type="text/template7">
<p>Hello, my name is {{firstName}} {{lastName}}</p>
</script>
Compile the template with Template7:
var template = $$('#template').html();
var compiledTemplate = Template7.compile(template);
Get your JSON data from the server:
$$.getJSON('link/to/your/json', {}, function (data) {
var context = data;
}
Now render the compiled template by passing required context
var html = compiledTemplate(context);
Now, the html
variable will contain the html you need. For example:
<p>Hello, my name is John Doe</p>