{"action":"opened","issue":{"url":"https://api.github.com/repos/OlivierBlanvillain/monadic-html/issues/106","repository_url":"https://api.github.com/repos/OlivierBlanvillain/monadic-html","labels_url":"https://api.github.com/repos/OlivierBlanvillain/monadic-html/issues/106/labels{/name}","comments_url":"https://api.github.com/repos/OlivierBlanvillain/monadic-html/issues/106/comments","events_url":"https://api.github.com/repos/OlivierBlanvillain/monadic-html/issues/106/events","html_url":"https://github.com/OlivierBlanvillain/monadic-html/issues/106","id":320575860,"number":106,"title":"Is there anything like 'Rx[Operation]' ?","user":{"login":"ztaoo","id":2178170,"avatar_url":"https://avatars0.githubusercontent.com/u/2178170?v=4","gravatar_id":"","url":"https://api.github.com/users/ztaoo","html_url":"https://github.com/ztaoo","followers_url":"https://api.github.com/users/ztaoo/followers","following_url":"https://api.github.com/users/ztaoo/following{/other_user}","gists_url":"https://api.github.com/users/ztaoo/gists{/gist_id}","starred_url":"https://api.github.com/users/ztaoo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ztaoo/subscriptions","organizations_url":"https://api.github.com/users/ztaoo/orgs","repos_url":"https://api.github.com/users/ztaoo/repos","events_url":"https://api.github.com/users/ztaoo/events{/privacy}","received_events_url":"https://api.github.com/users/ztaoo/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-05-06T09:09:54Z","updated_at":"2018-05-06T09:09:54Z","closed_at":null,"author_association":"NONE","body":"Some operation (or action) needs binding to a `Var(state)`.\r\nWhen state changing, the operation should be executed.\r\n\r\nMy solution is:\r\n```\r\n@JSExportTopLevel(\"front.Main\")\r\nobject Main {\r\n\r\n\r\n  @JSExport\r\n  def test12(): Unit = {\r\n    val state = Var(100)\r\n    var targetOp: Option[HTMLElement] = None\r\n\r\n    val opRx = state.map{ state =>\r\n      targetOp.foreach{ target =>\r\n        target.style.width = state.toString + \"px\"\r\n      }\r\n      \"\"\r\n    }\r\n\r\n    val body =\r\n      <div>\r\n        <h1>Hello.</h1>\r\n        <button onclick={() => state.update( s => s + 10) }>+</button>\r\n        <button onclick={() => state.update( s => s - 10) }>-</button>\r\n        <div style=\"display:flex; height:200px\">\r\n          <div style=\"width:100px; background:red\"></div>\r\n          <div style=\"width:100px; background:yellow\"></div>\r\n          <div mhtml-onmount={e: HTMLElement => targetOp = Some(e) } style=\"width:100px; background:blue\"></div>\r\n        </div>\r\n        {opRx}\r\n      </div>\r\n    mount(dom.document.body, body)\r\n  }\r\n}\r\n```\r\n\r\nIs there any better solution?\r\n"}}
{"actor":{"display_login":"ztaoo"}}