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.
scope
andrepeat
can be nested
{{ title }}
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 })
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 });