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

Load data from database: Template7 and Framework7

本文关键字：Template7 Framework7 数据数据库加载更新时间：2023-09-26

我正在使用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(
        '<!-- 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;
}

如何在中使用template7数据

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

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

你需要一个模板。例如：

<script id="template" type="text/template7">
    <p>Hello, my name is {{firstName}} {{lastName}}</p>
</script>

使用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。例如：

    <p>Hello, my name is John Doe</p>

Template7是一个移动的第一个JavaScript模板引擎，具有类似Handlebars的语法。它被用作Framework7 中的默认模板引擎

它超轻（缩小和缩小约1KB），速度极快（比移动Safari中的Handlebars快2-3倍）。

https://jsfiddle.net/aslamshaikh14/jexs43va/

https://youtu.be/rVM-vDQelpE

Template7