JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    a living template engine that helping us to create data-driven component.
    Filed under  › 

    • 🔾48%Overall
    • 1,042
    • 10 days
    • 🕩151
    • 👥10

    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;

    Show All