v0.8

View

class View extends Dd → file: mvc/View.js

The View class has a bunch of methods to manipulate with the web page HTML.

The most important is to load HTML content in the dd-view elements. Views are the HTML files located in the /src/views/ directory and loaded only when it is called by the controller. Which controller i.e. view will be taken depends on the current URL. The views are loaded in the element with dd-view attribute. The possible load destinations are: inner, sibling, prepend and append.

Instance

The view instance is created in App.routes() method when controller is instantiated.

Properties

No properties defined in this class.

Methods of the $modeler property

loadView(viewName, viewContent = '', dest = 'inner', cssSel = '') :void

Load view content in the element with the dd-view="viewName" attribute. Use this method in the __loader() controller hook. Recommendation: When 'sibling' dest is used the viewContent should be wrapped in some tag. For example do not use view like this: <p>enclosed text</p> text out of tags.
    ARGUMENTS:
  • viewName :string - the view name and the dd-view value, for example '#home'
  • viewContent :string - a string with HTML tags. Can be fetched with Vite ?raw suffix or with View.grabFileContent().
  • dest :inner|sibling|prepend|append - the destination (position) where view content will be placed
  • cssSel :string - CSS selector to load a part of the view content, for example: 'div > p.bolded:nth-child(2)'
EXAMPLE:
Load home.html in the dd-view="#home" element. 
import { Controller } from '@mikosoft/dodo';
import home from '/views/pages/home.html?raw';

export default class HomeCtrl extends Controller {

  constructor(app) {
    super();
  }

  async __loader(trx) {
    this.setTitle('DoDo API Reference: View');
    this.setDescription('Lightweight, easy to learn, Javascript, frontend framework for reactive apps');
    this.setKeywords('dodo, framework, javascript, js, single page app, spa, reactive');
    this.setLang('en');

    this.loadView('#home', home);
  }

}
<!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 href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="/styles.scss">
</head>

<body>
  <main dd-view="#home"></main>

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

</html>

emptyView(viewName, dest = 'inner') :void

Empty element with dd-view attribute. Usually used to remove the view content which was loaded with loadView() method.
    ARGUMENTS:
  • viewName :string - the view name and the dd-view value, for example '#home'
  • dest :inner|sibling|prepend|append - the destination (position) where view content was placed with loadView()


loadJS(url, opts = {}) :void

Load JS file from the URL by creating <script> tag at the end of body tag.
    ARGUMENTS:
  • url :string - JS script URL, 'https://code.jquery.com/jquery-3.7.0.min.js'
  • opts :object - - options {isModule:boolean, isDefer:boolean, isLazy:boolean}
    • isModule - add type="module" attribute when true
    • isDefer - add defer attribute when true
    • isLazy - add dd-lazy attribute when true (load JS file when all HTML is rendered)

unloadJS(url) :void

Remove <script> tag with specific URL.
NOTICE: This method will remove a script tag but will not remove it from browser memory so it will stay active.
    ARGUMENTS:
  • url :string - JS script URL

unloadAllJS(opts) :void

Remove all <script> tags.
NOTICE: This method will remove script tags but will not remove it from browser memory so they will stay active.
    ARGUMENTS:
  • opts :object - - options {isModule:boolean, isDefer:boolean, isLazy:boolean}
    • isModule - remove script tags with type="module"
    • isDefer - remove script tags with defer
    • isLazy - remove script tags with dd-lazy

exeJS(jsContent = '') :void

Wrap JS content in the async function and execute it. The <script> tag will not be created like it is in loadJS().
NOTICE: The content can be fetched from local files (usually from /public/ folder) due to CORS.
    ARGUMENTS:
  • jsContent :string - a string with Javascript code. The await can be used. JS content can be fetched from external files with Vite ?raw suffix or with View.grabFileContent().


loadCSS(url) :void

Create <link rel="stylesheet"> tag and load CSS.
    ARGUMENTS:
  • url :string - CSS file URL

unloadCSS(url) :void

Remove <link rel="stylesheet"> tag with specific URL in the src attribute.
    ARGUMENTS:
  • url :string - CSS file URL

plugCSS(cssRules, ref) :void

Create <style dd-ref="#reference"></style> tag in the <head> and add CSS rules into it.
    ARGUMENTS:
  • cssRules :string - CSS rules, for example: 'div {font-weight: bold; color:red;}'
  • ref :string - reference which will be used in unplugCSS(ref) method

unplugCSS(ref) :void

Remove <style dd-ref="#reference"></style> tag. Usually use it in the __destroy() controller hook.
    ARGUMENTS:
  • ref :string - HTML element reference


setTitle(title) :void

Set the text in the <title> tag.
    ARGUMENTS:
  • title :string - the title text

setDescription(desc) :void

Set the page description <meta name="description" content="...">.
    ARGUMENTS:
  • desc :string - the description text

setKeywords(kys) :void

Set the page keywords <meta name="keywords" content="...">.
    ARGUMENTS:
  • kys :string - the comma separated keywords, for example 'dodo, app, framework'

setLang(langCode) :void

Set the page language i.e. <html lang="en"> attribute.
    ARGUMENTS:
  • langCode :string - the language code, for example: 'en'


async grabFileContent(contentUrl = '') :void

Fetch HTML, CSS or JS content by sending a HTTP request to the server.
Use it in combination with loadView() or exeJS() methods.
    ARGUMENTS:
  • contentUrl :string - URL of the content, for example: http://localhost:4400/views/pages/home/main.html

async loadI18n(langCode) :void

Fetch text from language file and set the this.$model.$i18n variable. Thereby the HTML will be rendered.
The language file is in the /i18n/ folder and it's object is transfered to window[this.$appName].i18n variable with App.i18n() method.
    ARGUMENTS:
  • langCode :string - the langauge code, for example 'en'


Directives

dd-view="viewName"

The placeholder to load HTML content with View.loadView() method.

dd-lazyjs="--after__loader | --after_rend"

Mark the JS which needs to be lazy loaded.
There are 2 options:
--after__loader - load JS after __loader() hook i.e. after all views are loaded but before render of dd- elements (default)
--after__rend - load JS after __rend() hook i.e. after all views are loaded and after render of all dd- elements
If no option is used the default --after__loader will be taken.
EXAMPLE:
Lazy load the Syntax Highlight JS library. 
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/highlight.min.js" dd-lazyjs></script>
<script src="..." dd-lazyjs="--after__loader"></script>
<script src="..." dd-lazyjs="--after__rend"></script>


Stackblitz Examples