Description

Ballpen.js is a tiny, plugin based mvvm developing framework ready for building flexible web apps. It's very easy to use, and you can get it into your work only after a few minutes's quick learning.

Installation

npm install ballpen.js --save

Quick Start

<!-- html -->
<div id="app">
  <h1 bp-show="header.showTitle">{{ header.title }}</h1>
  <input type="text" bp-model="header.title" bp-event:input="syncTitle"></input>
  <button bp-event:click="foldTitle">
    <span>{{ header.buttonTxt }}</span>
  </button>
</div>

// javascript
let data = {
    header: {
        showTitle: true,
        title: "It's a sunny day!",
        buttonTxt: "- Fold -"
    }
};

new Ballpen("#app", {
    data: data,
    event: {
        foldTitle: (el, context, args) => {
            context.header.showTitle = !context.header.showTitle;
        },
        syncTitle: (el, context, args) => {
            context.title = el.value;
        }
    },
    watchers: {
        "header": {
            handler: (getter, setter) => {
                if (!getter.showTitle) {
                    setter.$buttonTxt = '- Unfold -';
                } else {
                    setter.$buttonTxt = '- Fold -';
                }
            }
        }
    }
});

Directives

• bp-model

'bp-model' is used for binding data to a distinct DOM element. For normal DOM element, 'bp-model' will bind data instead of its innerHTML attribute. For <input> like element, 'bp-model' will bind data instead of its value attribute. 'bp-model' will ignore the moustache style template within the DOM label.

e.g: examples/bp-model.html

• bp-class

'bp-class' is used for binding DOM elements' class name with distinct data.

e.g: examples/bp-class.html

• bp-for

'bp-for' is used for rendering DOM element with Array like data, ballpen.js will automatically rendering DOM, copying and binding them to a distinct amount the same as Array's length'.

e.g: examples/bp-for.html

• bp-event

'bp-event' is used for binding events to DOM elements.

e.g: examples/bp-event.html

• bp-bind

'bp-bind' is used for binding regular or customized attributes to DOM elements.

e.g: examples/bp-bind.html

• bp-pre

'bp-pre' is used for preventing distict DOM element from being rendered by ballpen.js.

e.g: examples/bp-pre.html

• bp-shade

'bp-shade' is used for hiding all of the rendering areas before render is getting done.

e.g: examples/bp-shade.html

• bp-show

'bp-show' is used for hiding or displaying elements according to distinct data's value.

e.g: examples/bp-show.html

• bp-ref

'bp-ref' is used for storing DOM elements into a global object Ballpen.$refs, you can get native DOM element directly from this global object which you had binded an 'bp-ref' on it before.

e.g: examples/bp-ref.html

Core Features

• Moustache Template

You can use 'Moustache Template' to bind data to DOM elements flexibly, with a data path inside this symbol {{}}, ballpen.js will automatically rendering 'Moustache Template' with corresponding data, and make it a 'Two-Way Data Binding'.

e.g: examples/core-moustache.html

• Data Watcher

You can use 'Watcher' to watch your data flow's changes, according to the changes, you can do everything what you want. Please take care that you can just set a watcher on an object or an array, not on any single normal data.

e.g: examples/core-watcher.html

• Lifecycle Hook Point

You can inject hook functions at every lifecycle hook points, it's include: "beforeRender", "afterRender".

e.g: examples/core-lifecycle.html

• Computed Attributes

Computed attribute is a kind of data type based on any other basic data's computing result. When one of dependent basic data has changed, the computed attribute will be updated synchronously.

e.g: examples/core-computed.html

• Decorator

You can use 'Decorator' on any directives with distinct value model, it just like tube operation symbol used in linux shell.

e.g: examples/core-decorator.html

Plugin System

Third Party Plugins

You can use Ballpen.registerPlugin(<alias>, <entity>) to register third party plugins into Ballpen's global environment, then you can call plugin functions by Ballpen.$<alias>.

e.g: examples/plugin-registerPlugin.html

Instance Properties

• .data

You can access the 'data' attribute from an constructed instance object. According to this attribute, you can get all the constructing data of the current status.

e.g: examples/instance-data.html

License

MIT

Copyright (c) 2017-present, YHSPY