ballpen.js v0.1.5
Description
Ballpen.js is a lightweight, 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 itsvalue
attribute. 'bp-model' will ignore the moustache style template within the DOM label.
- bp-class
'bp-class' is used for binding DOM elements' class name with distinct data.
- 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 asArray
's length'.e.g: examples/bp-for.html
- bp-event
'bp-event' is used for binding events to DOM elements.
- bp-bind
'bp-bind' is used for binding regular or customized attributes to DOM elements.
- 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.
- bp-show
'bp-show' is used for hiding or displaying elements according to distinct data's value.
- 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'.
- 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.**
- Lifecycle Hook Point
You can inject hook functions at every lifecycle hook points, it's include: "beforeRender", "afterRender".
Plugin System
Build-in Plugins
- Ballpen.$http
You can use
Ballpen.$http
to access ajax releatived operations. Based on axios
- Ballpen.$cookie
You can use
Ballpen.$cookie
to access cookie releatived operations. Based on js-cookie
- Ballpen.$cache
You can use
Ballpen.$cache
to access local cache releatived operations. Based on localForage
- Ballpen.$util
You can use
Ballpen.$utl
to access many utility methods, such asisEmpty
, etc. Based on underscore
- Ballpen.$animate
You can use
Ballpen.$animate
to make animations on DOM elements as you wish. Based on velocity
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 byBallpen.$<alias>
.
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.
License
Copyright (c) 2017-present, YHSPY