v0.9

DoDo Cheetsheet

App

  • fridge($fridge) - Set the controller's $fridge property which can be accessed in all controllers. It can be called with this.$fridge in the controller.
  • httpClient($httpClient) - Set the $httpClient property in all controllers. It can be called with this.$httpClient in the controller.
  • auth($auth) - Inject the auth library into the all controllers and use it as this.$auth in the controller.
  • debug($debugOpts) - Set the debug options.
  • i18n() - Set the global, window i18n property.
  • routes($routes) - Define app routes i.e. which controller will be executed when app URL is changed.
  • listen() - Listen for the route changes. Should be used after routes() method.

Controller

  • async __loader(trx) - A hook to load the HTML (views) and other resources (CSS, JS, ...). Set the title, description, keywords, lang ...
  • async __init(trx) - A hook to initialise the controller properties with the initial values. This is the right place for the API calls.
  • async __postrend(trx) - Execute the controller code immediatelly after the __rend() method i.e. when the complete HTML is generated
  • async __destroy() - Executes the controller code when the current controller is destroyed, i.e. the route is changed.

Model

  • use(modelName) - Take the specific model name ($model property) for further methods like: setValue(), getValue(), ...
  • setValue(val, path) - Set the $model property value and render the HTML.
  • delValue(path) - Delete the $model property at a certain path and render the HTML.
  • getValue(path) - Get the $model property value at a given path. this method will not render the HTML.
  • mpush(arrElem) - Add the element at the end of the model's array and render the HTML.
  • mpop() - Remove the last element from the model's array and render the HTML.
  • munshift(arrElem) - Add element to the beginning of the model's array and render the HTML.
  • mshift() - Remove the first element from the model's array and render the HTML.
  • mreverse() - revers elements of an array and render the HTML.
  • mrender() - Just render dd- elements in the HTML.

View


Dd


DdCloners


DdListeners

CODE

src/index.html 
<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>DoDo Framework</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <meta name="robots" content="index,follow">
  <meta name="googlebot" content="index,follow">
  <link rel="shortcut icon" href="/favicon.png" type="image/png">
  <link rel="stylesheet" type="text/css" href="/styles.scss">
</head>

<body>
  <nav dd-view="#navbar"></nav>
  <main dd-view="#main"></main>
  <footer dd-view="#footer"></footer>

  <script type="module" src="app.js"></script>
</body>

</html>
src/app.js 
import { App } from '@mikosoft/dodo';

// conf
import { $auth, $httpClient, $debugOpts } from './conf/index.js';

// controllers
import HomeCtrl from './controllers/HomeCtrl.js';
import Page1Ctrl from './controllers/Page1Ctrl.js';
import NotfoundCtrl from './controllers/NotfoundCtrl.js';

const $routes = [
  ['when', '/', HomeCtrl],
  ['when', '/page1', Page1Ctrl],
  ['notfound', NotfoundCtrl]
];

// app
const app = new App('myDodoApp');
app
  .auth($auth)
  .httpClient($httpClient)
  .debug($debugOpts);
  .routes($routes)
  .listen();
import { Controller, corelib } from '@mikosoft/dodo';
import navbar from '../views/inc/navbar.html?raw';
import homeMain from '../views/pages/home/main.html?raw';
import footer from '../views/inc/footer.html?raw';


export default class HomeCtrl extends Controller {

  constructor(app) {
    super();
  }

  async __loader(trx) {
    this.setTitle('DoDo - Single Page App Framework');
    this.setDescription('DoDo is JS framework for single page applications.');
    this.setKeywords('dodo, framework, javascript, js, single page app, spa');
    this.setLang('en');
    this.loadView('#navbar', navbar);
    this.loadView('#main', homeMain);
    this.loadView('#footer', footer);
  }

  async __init(trx) {
    console.log('init() -- trx::', trx);
    console.log('init() -- navig::', corelib.navig);
    console.log('init() -- ctrl::', this);
    this.something = 'smthng';
  }

  /*
  // if rend() is not defined then this.render() is used
  async __rend(trx) {
    console.log('rend() -- trx::', trx);
    await this.ddUNLISTEN();
    this.ddHref();
  }
  */

  async __postrend(trx) {
    console.log('postrend() -- trx::', trx);
  }

  async __destroy() {
    console.log('destroy() -- navig::', corelib.navig);
    console.log('destroy() -- ctrl::', this);
    this.unloadCSS(['https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-coy.min.css']);
    this.unloadJS();
  }

}