Загрузить данные из базы данных: Template7 и Framework7

Я использую Template7 и Framework7 для создания приложения iOS с помощью PhoneGap. Я изучаю руководство.

файл 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;
}

Как использовать template7data в

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

и загружать в него данные из базы данных или из какого-либо AJAX-запроса. Я хочу использовать эти данные для отображения содержимого в файле index.html.


person skjindal93    schedule 21.12.2015    source источник


Ответы (2)


  1. У вас должен быть шаблон. Например:

    <script id="template" type="text/template7">
        <p>Hello, my name is {{firstName}} {{lastName}}</p>
    </script>
    
  2. Скомпилируйте шаблон с помощью Template7:

    var template = $$('#template').html();
    var compiledTemplate = Template7.compile(template);
    
  3. Получите данные JSON с сервера:

    $$.getJSON('link/to/your/json', {}, function (data) {          
        var context = data;
    }
    
  4. Теперь визуализируйте скомпилированный шаблон, передав требуемый контекст

    var html = compiledTemplate(context);
    

Теперь переменная html будет содержать нужный вам html. Например:

    <p>Hello, my name is John Doe</p>
person Tim V    schedule 22.12.2015
comment
у меня это не работает, я получаю эту ошибку: Template7: Template должен быть строкой - person marti_; 01.12.2017

Template7 — это шаблонизатор JavaScript для мобильных устройств с синтаксисом, подобным Handlebars. Он используется в качестве механизма шаблонов по умолчанию в Framework7.

Он очень легкий (около 1 КБ в сжатом виде) и молниеносно быстрый (до 2-3 раз быстрее, чем Handlebars в мобильном Safari).

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

https://youtu.be/rVM-vDQelpE

Template7

person Aslam Shaikh    schedule 12.01.2019