DoodJS

• DoodJS
  • State
    • Known issues
  • Usage
    • Options
    • Build from source
  • Directives
    • d-data
    • d-text
    • d-html
    • d-show
    • d-model
    • d-for
    • d-if
    • d-on
    • d-bind
    • d-ref
    • d-effect
    • d-ignore
    • inline
  • magic variables
  • Modifiers
  • Arguments

A simple JavaScript framework to add functionality to your HTML elements.

State

• The framework is currently in a very early state.

Known issues

Usage

DoodJS can simply be loaded from CDN:

<script src="https://unpkg.com/doodjs"></script>
<script>
  let dood = Dood.init({});
</script>

or as a module:

import { init } from "https://unpkg.com/doodjs?module";
let dood = init({
  yourData: value,
});

Provide a object wich will contain your reactive data available in your HTML elements.

Options

The init function can take a options object as a second argument. The following options are available:

• root defines the root of DoodJS on the DOM. Standard query selector can be used.

let dood = init({}, { root: "#main" });

Build from source

• Clone this repository.
• Run npm install and npm run build.
• The script is now available in the dist/ directory.

Directives

d-data

Allows to declare a new context. The data will be available on the element the directive is attached to and on all child elements.

<div d-data="{hello: 'world'}">
  <div d-text="hello"></div>
</div>

d-text

Will set the given value as elements innerText.

<div d-text="'Hello, World!'"></div>

d-html

Will set the given value as elements innerHTML.

<div d-html="myHTML"></div>

d-show

Will display the element if given expression is true.

<div d-show="count > 10"></div>

d-model

Will bind the value of the input to the value of the given variable.

<input type="text" d-model="myInput" />

d-for

Will render a list of elements, d-for can contain multiple HTML elements.

<div d-for="item of items">
  <div d-text="item"></div>
</div>

d-for can also itterate over the keys of the given object.

<div d-for="(item,key) of items"
  <div d-text="'Key: '+key"></div>
  <div d-text="'Item: '+item"></div>
</div>

d-if

Will display the element if expression is true. The difference to d-show is that the element will be removed from the DOM if the expression is false.

<div d-if="showMessage">
  <div d-text="message"></div>
</div>

d-on

Will add an event handler with the given function. Modifiers and Arguments are supported.

<button d-on:click="clickHandler">Click me</button>

d-bind

Will bind the given value the specefied property of the element.

<div d-bind:class="class"></div>
<div d-bind:style="{color: error ? 'Red' : 'Green'}"

d-ref

Will add the element to the refs.
Element will be available via $refs.

<div d-ref="tag"></div>
<div d-effect="$refs.tag.innerText = 'Hello, World!'"

d-effect

Will re-run the effect when a value in the expression changes.

<div d-effect="$el.innerText = message"></div>

d-ignore

Elements with the d-ignore directive will be ignored during initialization.

<div d-ignore></div>

inline

Code inside {{/}} brackets will automatically be evaluated and is also reactive.

<div d-data="{message: 'Hello, World!'}"
    <div>Message: {{message}}</div>
</div>

magic variables

There are a list of variables that are available in all directive functions.

• $el can be used to access the current element.
• The $refs object can be used to access all elements referenced by d-ref.
• The $args array contains contains all arguments provided by directive, if any.

Modifiers

Arguments