-
Notifications
You must be signed in to change notification settings - Fork 1
/
example5.html
70 lines (57 loc) · 1.77 KB
/
example5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<html>
<body>
<!-- FExample Form -->
<h1>2 Timers Store Demo for Tsore.js</h1>
<timer></timer>
<!-- View definition -->
<script type="riot/tag">
<timer>
<div style="font-size:40px">Timer1: {time1} Timer2: {time2}</div>
<button onclick="tsore.dispatch('Start')">Start</button>
<button onclick="tsore.dispatch('Stop')">Stop</button>
<button onclick="tsore.dispatch('Reset')">Reset</button>
<button onclick="tsore.dispatch('MinusFive')">Minus 5 from Timer1</button>
<button onclick="tsore.dispatch('AddTen')">Add 10 to Timer2</button>
this.mixin('tsore'); // Attach Tsore functions
this.subscribe('timer1',function(store){ // Attach store with update function
this.time1 = store.time;
});
this.subscribe('timer2',function(store){
this.time2 = store.time;
});
tsore.dispatch('Start'); // Runaction
</timer>
</script>
<script src="riot+compiler.js"></script>
<script src="tsore.js"></script>
<script>
// Stores
var TimerActions = {
Reset: function(){
this.time = 0;
tsore.trigger('change');
},
Start: function(){
if(this.intervalId) clearInterval(this.intervalId);
this.intervalId = setInterval(function(){
this.time++;
tsore.trigger('change');
}.bind(this),1000);
},
Stop: function(){
if(this.intervalId) clearInterval(this.intervalId);
}
};
tsore.register('timer1',new tsore.Store({actions:TimerActions,defaults:{time:10}}))
.on('MinusFive',function(){
this.time-=5;
});
tsore.register('timer2',new tsore.Store({actions:TimerActions,defaults:{time:10}}))
.on('AddTen',function(){
this.time+=10;
})
// Mount Riot.js HTML tags
riot.mount('*');
</script>
</body>
</html>