Get Start from MVVM pattern

Controller

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.

define('a',function(exports,require,module){
  //the module inner scope

  exports.name = '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>
</div>

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

define('river.grammer.myview',function(exports,require,module){

  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

JSFiddle;

Module Name : {{ name }}

PV Click : {{ pv }}

Controller

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

View

<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>
</div>

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);
        render(element,warning)
      })
    }

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

Css

.warning{
  color : red;
  font-size:1.2em;
}