regularjs: a living template engine that helps us to create data-driven component.
Branch: master
Clone or download
Latest commit bdb9d43 Jan 9, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin rename to regularjs May 20, 2014
dist feature: pump version, releave 0.6.1 Jan 9, 2019
example
lib
scripts fix rollup undefined error Aug 30, 2016
test fix: fix bugfix 218 Jan 9, 2019
.gitignore
.jshintrc fix #90 Jan 22, 2018
.npmignore add .npmignore Sep 29, 2015
.travis.yml Revert "bundling with rollup, use headless chrome for karma" Jan 22, 2018
LICENSE Change MIT Feb 13, 2015
README.md Merge pull request #203 from regularjs/next Jan 26, 2018
bower.json remove unused ssr dom.inject to pump performance Jun 10, 2017
gulpfile.js fix: gulp build throws error with node 8.x Apr 12, 2018
package.json release: 0.6.2 Jan 9, 2019

README.md

regularjs

Regularjs

Build Status

Regularjs is a living template engine that helps us to create data-driven components.

Features

  • 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.

Quick Start

Example 1: define a simple Note Component

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");

Example1 on codepen.io

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.

Example 2: define a List Component

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.

Example2 on codepen.io

Example 3: combine Note with NoteList

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 component

When 'Enter' is pressed, Note will emit a 'post' event with draft as the $event object.

The keyword this in 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.

Example3 on codepen.io

See more on Guide: Quick Start

Resources

Browser Compatibility

IE7+ and other modern browsers.

Installation

bower

bower install regularjs

dist/regular.js has been packaged as a standard UMD, and therefore you can use it in AMD, commonjs or global.

npm (browserify or other based on commonjs)

$ npm install regularjs

use

var Regular = require('regularjs');

component

$ component install regularjs/regular

use

var Regular = require('regularjs/regular');

Direct download

  1. regular.js
  2. regular.min.js

Who are using?

  1. NetEase: the operator of the famous website www.163.com.

Community

Contributing

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/specs folder. Always make sure the gulp test is passed, and the test/runner/index.html is passed in every target browser (if a certain browser is not installed, list that in gulpfile's karmaConfig)

LICENSE

MIT.

TODO

remove log code in production mode;