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
- loadView(viewName, viewContent = '', dest = 'inner', cssSel = '') - Load view content in the element with the dd-view="viewName" attribute.
- emptyView(viewName, dest = 'inner') - Empty element with dd-view attribute.
- loadJS(url, opts = {}) - Load JS file from the Url by creating <script> tag at the end of body tag.
- unloadJS(url) - Remove <script> tag with specific URL.
- unloadAllJS(opts) - Remove all <script> tag.
- exeJS(jsContent = '') - Wrap JS content in the async function and execute it. The <script> tag will not be created like it is in loadJS().
- loadCSS(url) - Create <link rel="stylesheet"> tag and load CSS.
- unloadCSS(url) - Remove <link rel="stylesheet"> tag with specific URL in the src attribute.
- plugCSS(cssRules, ref) - Create <style dd-ref="#reference"></style> tag in the <head> and add CSS rules into it.
- unplugCSS(ref) - Remove <style dd-ref="#reference"></style> tag. Usually use it in the __destroy() controller hook.
- setTitle(title) - Set the text in the <title> tag.
- setDescription(desc) - Set the page description.
- setKeywords(kys) - Set the page keywords.
- setLang(langCode) - Set the page language i.e. <html lang="en"> attribute.
- async grabFileContent(contentUrl = '') - Fetch HTML, CSS or JS content by sending a HTTP request to the server.
- async loadI18n() - Change the language text by setting this.$model.$i18n
- dd-view="viewName" - The placeholder to load HTML content with View.loadView() method.
- dd-lazyjs - Mark the JS which needs to be lazy loaded i.e. after the all HTML is rendered.
Dd
- dd-setinitial="controllerProperty [--convertType]" - Get the element value and set the controller property value when route is opened i.e. when controller is executed.
- dd-elem="$elemProp" - Transfer the DOM element to the controller property this.$elem.
- dd-text="controllerProperty | controllerMethod()" - Print pure text in the dd-text element. The HTML tags will not be interpreted.
- dd-html="controllerProperty | controllerMethod()" - Embed HTML node in the DOM at a place marked with dd-html attribute.
- dd-value="controllerProperty | controllerMethod()" - Take controller property and set the element attribute and DOM property value. It's usually used to set the HTML form element value.
- dd-disabled="controllerProperty | controllerMethod()" - Disable the HTML element by setting disabled attribute.
- dd-checked="controllerProperty | controllerMethod()" - Set the "checked" attribute with the controller property value. Use it for checkbox or radio input elements only.
- dd-selected="controllerProperty | controllerMethod() [--multiple]" - Sets the "selected" attribute with the controller property value. Use it for select input element.
- dd-class="controllerProperty | controllerMethod() [--replace]" - Sets the "class" attribute with the controller property value.
- dd-style="controllerProperty | controllerMethod() [--replace]" - Sets the "style" attribute with the controller property value.
- dd-src="controllerProperty | controllerMethod() [--<defaultSrc>]" - Set the element src attribute.
- dd-attr="controllerProperty | controllerMethod() [--<attributeName>]" - Sets any attribute with the controller property value. The controller property value should a string.
- dd-if="controllerProperty | controllerMethod()" - Hide element on falsy value by setting style="display: none" or show it by removing it.
- dd-visible="controllerProperty | controllerMethod()" - Show or hide the HTML element by setting style="visibility:'visible' | 'hidden'".
DdCloners
- dd-each="controllerProperty | controllerMethod() --val,key" - Multiply element based on controllerProperty (or method) which is an array.
- dd-repeat="controllerProperty | controllerMethod()" - Multiply element based on controllerProperty, on number or expression.
DdListeners
- dd-href | dd-href="controllerProperty" - Href listener which changes the URL (browser history states).
- dd-set="controllerProperty [--convertType]" - Get the value from HTML form elements and when value is changed set the controller property.
- dd-model="controllerProperty [--convertType]" - When view is updated the controller property will be updated and when controller property is updated the view will be updated.
- dd-click="controllerMethod|() [--preventDefault]" - Listen for click and execute the function i.e. controller method.
- dd-keyup="controllerMethod|() [--<keyCode>]" - Parse the "dd-keyup" attribute. Listen for the keyup event on certain element and execute the controller method or expression.
- dd-change="controllerMethod|()" - Parse the "dd-keyup" attribute. Listen for the keyup event on certain element and execute the controller method or expression.
- dd-evt="controllerMethod1() --eventName1 && controllerMethod2() --eventName2 && ..." - Make complex event executions.
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();
}
}