Get Start from MVVM pattern


controller is response for mainpulating data ,like CRUD operations ,etc.

riverjs is a data binding front-end library,data binding means the the dom and scope of module are merged together.In mvc or mvvm pattern , we call this module as controller. for example the module a and dom #wrapper.

  //the module inner scope = 'a';
  exports.status = 'finished';


View Interface

html and css is response for configing user interface, the template language expression {{ }} will help to attach the correspond data to correct position of the view.

the #wrapper dom element is bound to the module a,the scope attribute tells the target module and bound range.

<div scope="a" id="wrapper" myview> 
  <p>{{ name }}</p>

View controller

It's a custom html attributes , response for rendering view with the correspond scope,and handl dom event,animation.

in riverjs , all view-controller modules must exports a function and regiest under river.grammer namespace for example , river.grammer.myview


  exports = module.exports = myview;

  function myview(str,scope,element){
    //str is the attribute's  value
    //scope is the correspond data controler scope
    //element is the marked dom reference 

A Quick Example


Module Name : {{ name }}

PV Click : {{ pv }}


define('a', function (exports, require, module) { = 'a';
    exports.pv = 0;
    exports.add = function () {
    exports.reset = function () {


<div scope="a" myview="5">
  <p>Module Name : {{ name }}</p>
  <p>PV Click : <strong> {{ pv }} </strong></p>
  <button jclick="add">add</button>
  <button jclick="reset">reset</button>
define('river.grammer.myview', function (exports, require, module) {
    exports = module.exports = myview;

    function myview(max, scope, element) {
      scope.onchange('pv', function (newvalue) {
        var warning = Number(newvalue) >= Number(max);

    function render(element,warning) {
      var p = element.querySelector('strong')
      p.className = warning ? 'warning' : '';


  color : red;