Grammar Engine

riverjs use {{ }} as the exprssion symbol,and don't support eval caculation only solved variable and function executing according the nearest scope,for example when you try to do this {{ 1 + 2 }} ,riverjs don't understand what you want to do.But when you try to do this <div scope="your.ctrl"> {{ name }} </div> riverjs will got to the your.ctrl module to find the variable name and apply it to the current element text node.

There are 7 build-in markup commands(or we call it directive in AngularJS) in RiverJS, they are scope,repeat,jbind, jclick,jon,jchange,'jcompile'. RiverJS encourage programmer use less markup commands when build app to reduce complexit.

Markup

scope and repeat can be nested

Nest repeat

{{singer.name}}
- {{song.name}} {{song.url}}

 1 <div class="col-md-4 well">
 2   <div scope="your.class.music">
 3     <p>{{ title }} </p>
 4     <ul>
 5       <li repeat="singer in singers">
 6       <span>{{singer.name}}</span> 
 7         <ul>
 8           <li repeat="song in singer.songs">
 9             <span>{{song.name}}</span>
10             <a href="{{song.url}}">{{song.url}}</a>
11           </li>
12         </ul>
13       </li>
14     </ul>
15   </div>
16 </div>

 1 define('your.class.music',function(exports,require,module){
 2   var myMusicfromDB = {
 3     title: 'Welcome to my Music zone',
 4     singers: [{
 5       name: 'Michael Jackson',
 6       songs:[{
 7         url:'http://some.mp3',
 8         name:'heal the world'
 9       },{
10         url:'http://beatit.mp3',
11         name:'black and white'
12       }]
13     }, {
14       name: 'Avril Lavigne',
15       songs:[{
16         url:'http://some.mp3',
17         name:'Smile'
18       },{
19         url:'http://some.mp3',
20         name:'Girl friend'
21       }]
22     },{
23       name: 'Lady Gaga',
24       songs:[{
25         url:'http://some.mp3',
26         name:'Pock face'
27       },{
28         url:'http://some.mp3',
29         name:'Bad romance'
30       }]
31     },{
32       name: 'Rihanna',
33       songs:[{
34         url:'http://some.mp3',
35         name:'umbrella'
36       }]
37     }]
38   }
39   return myMusicfromDB
40 
41   //or inject to exports
42   //exports.myMusicfromDB = myMusicfromDB;
43 
44   //or inject to this
45   //exports = module.exports = function(){
46   //  this.myMusicfromDB = myMusicfromDB;
47   //}
48 })

Nest scope

Name: {{ name }}

Name : {{ name }}

Skill : {{ skill }}

Where : {{ where }}

1 <div scope="ctl.father">
2   <p>Name: {{ name }}</p>
3   <div scope ="ctl.son">
4     <p>Name : {{ name }}</p> <!-- cover father's pro -->
5     <p>Skill : {{ skill }}</p> 
6     <p>Where : {{ where }}</p> <!-- inherit from father -->
7   </div>
8 </div>

 1 define('ctl.father',function(exports,require,module){
 2   return function(){
 3     this.name = "Peter";
 4     this.where = "China";
 5   };
 6 });
 7 
 8 
 9 define('ctl.son',function(){
10   return function(){
11     this.name = "Tomas";
12     this.skill = "dance";
13   };
14 });