Skip to main content

Ініціалізація додатоку

Тепер ви можете побачити наш HTML-макет із пов’язаними необхідними файлами CSS і JavaScript. Тепер ми повинні ініціалізувати наш додаток (наприклад, у my-app.js):
var app = new Techno4();
У наведеному вище прикладі ми використовуємо змінну програми, де зберігаємо ініціалізований екземпляр Techno4 для легкого доступу в майбутньому. Не обов’язково називати додаток App, вона може бути будь-якою. Це було досить просто. Але Techno4 також забезпечує більше налаштувань ініціалізації, передаючи об’єкт із параметрами: 
var app = new Techno4({
  routes: [
    {
      name: 'about',
      path: '/about/',
      url: './pages/about.html',
    },
    {
      name: 'news',
      path: '/news/',
      url: './pages/news.html',
      options: {
        animate: false,
      },
    },
    {
      name: 'users',
      path: '/users/',
      componentUrl: './pages/users.html',
      options: {
        props: {
          users: ['Techno Wizard', 'Taras Shtempo'],
        },
      },
      on: {
        pageAfterIn: function test (e, page) {
          // do something after page gets into the view
        },
        pageInit: function (e, page) {
          // do something when page initialized
        },
      }
    },
    // Default route, match to all pages (e.g. 404 page)
    {
      path: '(.*)',
      url: './pages/404.html',
    },
  ],
});
Щоб переглянути список усіх доступних параметрів програми, перегляньте розділ Додаток/ Ядро
Після ініціалізації програми нам потрібно ініціалізувати представлення (
<div class="view view-main">
у макеті програми). По суті View — це маршрутизатор програми, який відповідає за навігацію:
var mainView = app.views.create('.view-main');
Отже, ваш остаточний код ініціалізації в my-app.js може виглядати так: 
var app = new Techno4({
  // App root element
  el: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: true,
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});

var mainView = app.views.create('.view-main');

Що далі?

Гаразд, тепер ми знаємо, як створювати і запускати програму. Тепер нам потрібно перевірити компонент App / Core, щоб дізнатися більше про його параметри та методи, як працює Router, дізнатися більше про Views, Pages та інші компоненти.

Techno4 Framework