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);