Lighten.js

Lighten.js is a lighten web library, focus on boost one page application develop exprience.

Getting Started

Download lighten.js and import script file above the end of head.

<html>
  <head>
    <!-- import lighten.js here -->
    <script src='./lighten.js'></script>
  </head>
  <body>
    <!-- your script here-->
    <script src='./index.js'></script>
  </body>
</html>

Use new operator to create Lighten Instance and setup your data.

let lighten = new Lighten({
  data: data
})

Usage

Definite render target

Use l-target-app attr to definite your render root.

<div l-target-app>
  <h1> {{ title }} </h1>
</div>

Template Syntax

Use double curly quote to get instance data.

<h1> {{ title }} </h1>

// your script file
let data = {
  title: 'Hello, Lighten!'
}

let lighten = new Lighten({
  data: data
})

And It will be render like this.

<h1> Hello, Lighten! </h1>

Directive

You can add directive to your html element to enhance it feature.

l-alert
l-show

l-alert

This directive will alert its value when mouse clicking.

<button l-alert=''>alert</button>

l-show

This directive will trigger show/hidden via its value .

<button l-show=''>alert</button>

Binding data

If you want to binding instance data to directive, add : front to directive and it will try get instance data.

<div :l-show="isLightboxOpening"> {{ title }} </div>

let lighten = new Lighten({
  data: {
    title: 'Hello, Lighten!'
    isLightboxOpening: false
  }
})

It will be render like this.

<div style='display:none;'> Hello, Lighten! </div>

Changelog

Version change detail are documented in the release page.

License

MIT

shawnlin0201/Lighten.js