Git Product home page Git Product logo

doodjs's Introduction

DoodJS

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

doodjs's People

Contributors

tomrosen avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.