reren

A simple javascript viewengine inspired by viewengines like React, Angular and KnockoutJs

Example/Idea:

var R = require('reren');

var MyComponent = R.component({
  controller: function() {
    this.model.timer = 0;
    
    setInterval(() => {
      model.timer += 1;
      this.update();
    }, 1000);
  },
  view: function(model) {
    return R.div({ classes: "container" }, [
      R.div({ classes: "row" }, model.timer.toString());
    ]);
  }
});

R.start(MyComponent, document.getElementById("container"));

Component API

To create a new Reren Component you use the following API:

var R = require('reren');

var MyComponent = R.component({
  controller: function() {
    // controller logic here
  },
  view: function() {
    // view logic here
  }
});

Controller

| Method | Description |
| ------------- |-----------------------------------------------------------------------------------| | this.onUpdate | Called when the component is updated by it's parent component | | this.model | A controller always has a model object available that will be passed to it's view | | this.update | When called, will trigger the view to rerender again (Will also notify child components 'onUpdate')|

View

The view will be injected with the model from the controller (if the controller is defined) and it should always return a single VElement instance to be able to construct and compare the virtual dom;

  view: function(model) {
    return R.div({ id: "my_id" }, model.text);
  }

VElements

VElements are used to define your (virtual) DOM and they can be used in the following ways:

// default api: new VElement(tagName, attributes, children || content);
new VElement("div", { id: "my_id" }, "some text");
new VElement("div", { id: "my_id" }, new VElement("span", null, "some text"));
new VElement("div", { id: "my_id" }, [ 
                                        new VElement("span", null, "first"),
                                        new VElement("span", null, "second")
                                      ]);

// shorthand api: R.div(attributes, children || content);
R.div({ my_id }, R.span(null, "some text"));

// creating a nested Component: new VElement(Component, model);
new VElement(NestedComponent, model);