31:[] 2f:{"title":"[RxJS] Learning observables and the scan operator","cells":[{"id":0,"value":"md`# [RxJS] Learning observables and the scan operator\n\nI am learning RxJS by reproducing the examples that are listed on the [Official RxJS Guide](https://rxjs.dev/guide/overview).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`## First example\nThe first example shows how to create an observable button that count clicks. \n\nIt is interesting to see that the scan operator (acting like a reducer) keeps its context for each observers.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`### Example 1 – subscribe to an observable button\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":" // The subscribe function that will listen to the observable button clicks\n subscribe = function(){ \n Rx.Observable.fromEvent(document.getElementById(\"button\"), 'click')\n .scan( click => click + 1, 0)\n .subscribe( click => {\n var result = document.getElementById(\"result\")\n result.value = click + \" clicked\\n\" + result.value;\n })\n }\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"html`\n

Demo

\n\n\n\n \n\n\n \n\n

\n \n \n \n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"{\n // The subscribe button\n Rx.Observable.fromEvent(document.getElementById(\"subscribe\"), 'click')\n .subscribe( () => subscribe());\n \n // The reset button\n Rx.Observable.fromEvent(document.getElementById(\"reset\"), 'click')\n .subscribe( () => {\n document.getElementById(\"button\").value = \"\";\n document.getElementById(\"result\").value = \"\";\n })\n return md`The subscribe and reset buttons`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"Rx = require(\"https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.6.0-forward-compat.5/Rx.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}