Regularjs is a living template engine that helps us to create data-driven components.
- String-based template makes it flexible to write your component;
- data-binding based on dirty-check: experience from AngularJS-like frameworks also makes sense to regularjs;
- self-contained and well-defined encapsulation makes it more easily integrated with other frameworks;
- composite components: components can be used as "custom elements";
- directive, filter, event and animation... all you need is provided out of the box with concise API.
var Note = Regular.extend({
template:
"<input {#if !disabled} r-model='hello' {#else} disabled {/if} > {hello} \
<button on-click={disabled = !disabled}>{disabled? 'active': 'disable'} it</button>"
});
// inject component into #app , you can also inject at 'before' , 'after', 'top'.
var note = new Note().$inject("#app");This example is dead simple, but you can find the directive and attribute is easily switched by statement 'if', which is difficult with other mvvm frameworks.
var NoteList = Regular.extend({
template:
"<ul>{#list notes as nt}" +
"<li class={nt.done? 'done': ''} on-click={nt.done= !nt.done}>{{nt.content}}</li>" +
"{/list}</ul>"
});
var list = new NoteList({
data: {
notes: [
{content: 'playgame'},
{content: 'homework'}
]
}
}).$inject("#app");In this Example, we create a ListView with the statement list.
We need to refactor Note to make it composable.
var Note = Regular.extend({
name: 'note', // register component during the definition of Component
template:
"<input r-model={draft}> <button on-click={this.post()}> post</button>",
post: function(){
var data = this.data;
this.$emit('post', data.draft);
data.draft = ""; //clear the draft
}
});
Regular.component('list', NoteList); // manual register a componentWhen 'Enter' is pressed, Note will emit a 'post' event with draft as the $event object.
The keyword
thisin the template refers to the component itself.
Then, let's define the core component: NoteApp.
var NoteApp = Regular.extend({
template:
"<note on-post={notes.push({ content: $event} )}/>"+
"<list notes ={notes}></list>"
});
var noteapp = new NoteApp({
data: {notes:[]}
});
noteapp.$inject('#app');you can register a component (via attribute name or method Component.component) to make it composable in other components.
See more on Guide: Quick Start
IE7+ and other modern browsers.
bower install regularjsdist/regular.js has been packaged as a standard UMD, and therefore you can use it in AMD, commonjs or global.
$ npm install regularjsuse
var Regular = require('regularjs');$ component install regularjs/regularuse
var Regular = require('regularjs/regular');- NetEase: the operator of the famous website www.163.com.
-
If you find any bug or have any suggestion, please feel free to open an issue
-
Ask any question on Stack Overflow with tag
regularjs. -
Social
- twitter: follow the @regularjs
- gitter: join chat at
- weibo: @拴萝卜的棍子
regularjs is still under heavy development, and please help us with feedback. Contributing to this project is also welcome.
- Please open an issue before sending pull request
- if needed, add your testcase in
test/specsfolder. Always make sure thegulp testis passed, and thetest/runner/index.htmlis passed in every target browser (if a certain browser is not installed, list that in gulpfile's karmaConfig)
MIT.
remove log code in production mode;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent