从数据库加载数据:Template7和Framework7

我使用Template7和Framework7使用PhoneGap构建iOS应用程序.我正在阅读教程

my-app.js文件

// 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(

        '' +
        '
' +
        '  
' +
        '    
Back
' +
        '    
Dynamic Page ' + (++dynamicPageIndex) + '
' +
        '  
' +
        '
' +
        '
' +
        '  ' +
        '  
' +
        '    ' +
        '    
' +
        '      
' +
        '        
' +
        '          
Here is a dynamic page created on ' + new Date() + ' !
' +
        '          
Go back or go to Services.
' +
        '        
' +
        '      
' +
        '    
' +
        '  
' +
        '
'
    );
    return;
}

我如何使用template7data

myApp.onPageInit('index', function (page) {
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {}
});

并从数据库或某些AJAX查询中加载数据.我想使用该数据在index.html文件上显示内容.

你需要一个模板.例如:

使用Template7编译模板:

var template = $$('#template').html();
var compiledTemplate = Template7.compile(template);

从服务器获取JSON数据:

$$.getJSON('link/to/your/json', {}, function (data) {          
    var context = data;
}

现在通过传递必需的上下文来渲染编译的模板

var html = compiledTemplate(context);

现在,html变量将包含您需要的html.例如:

    
Hello, my name is John Doe