See the JS tab for the code and browser console for messages
Click this button to change the value of the city signal to "Las Vegas", will decrement sig_n by 3 and
will toggle sig_b.
Click this button to change the value of the city signal to "New York", will increment sig_n by 5 and
will set sig_b to true.
The following table will display the values of the signals and update them as they change (if the subscription is kept).
| signal | value | |
|---|---|---|
| sig_b | ||
| sig_n | ||
| city |
<p>See the JS tab for the code and browser console for messages</p>
<p>
Click this button to change the value of the <b>city</b> signal to "Las Vegas", will decrement <b>sig_n</b> by 3 and
will toggle <b>sig_b</b>.
<ch5-button label="Btn1" sendEventOnClick="trig1"></ch5-button>
</p>
<p>
Click this button to change the value of the <b>city</b> signal to "New York", will increment <b>sig_n</b> by 5 and
will set <b>sig_b</b> to true.
<ch5-button label="Btn2" sendEventOnClick="trig2"></ch5-button>
</p>
<p>
The following table will display the values of the signals and update them as they change (if the subscription is kept).
</p>
<table class="table">
<tr><th>signal</th><th>value</th></tr>
<tr>
<td>sig_b</td>
<td id="s1"></td>
<td><ch5-button id="us1" label="Unsubscribe from sig_b"></ch5-button></td>
</tr>
<tr>
<td>sig_n</td>
<td id="s2"></td>
<td><ch5-button id="us2" label="Unsubscribe from sig_b"></ch5-button></td>
</tr>
<tr>
<td>city</td>
<td id="s3"></td>
<td><ch5-button id="us3" label="Unsubscribe from city"></ch5-button></td>
</tr>
</table>
(function(CrComLib){
var s1 = document.querySelector('#s1');
var s2 = document.querySelector('#s2');
var s3 = document.querySelector('#s3');
var us1 = document.querySelector('#us1');
var us2 = document.querySelector('#us2');
var us3 = document.querySelector('#us3');
var subId1 = CrComLib.subscribeState('b','sig_b',s1Sub);
var subId2 = CrComLib.subscribeState('n','sig_n',s2Sub);
var subId3 = CrComLib.subscribeState('s','city',s3Sub);
us1.addEventListener('click',function(){
CrComLib.unsubscribeState('b','sig_b',subId1);
});
us2.addEventListener('click',function(){
CrComLib.unsubscribeState('n','sig_n',subId2);
});
us3.addEventListener('click',function(){
CrComLib.unsubscribeState('s','city',subId3);
});
function s1Sub(v){
s1.textContent=v;
}
function s2Sub(v){
s2.textContent=v;
}
function s3Sub(v){
s3.textContent=v;
}
})(CrComLib);