controller is response for mainpulating data ,like CRUD operations ,etc.
riverjs is a data binding front-end library,data binding means the the
dom
andscope
of module are merged together.In mvc or mvvm pattern , we call this module ascontroller
. for example the modulea
and dom#wrapper
.
define('a',function(exports,require,module){
//the module inner scope
exports.name = 'a';
exports.status = 'finished';
})
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 modulea
,thescope
attribute tells the target module and bound range.
<div scope="a" id="wrapper" myview>
<p>{{ name }}</p>
</div>
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
}
})
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;
}