29:null 2a:["$","title",null,{"children":"Input e view: scateniamo la libertà degli utenti | Andrea Mignone | Observable"}] 2f:[{"id":"702f7c6bdce284fd6565fe62322b2b1b9c0c3934827f421a9267d3851ce148d803625cacd6ca8ac12c5e29b8b0b0d721565b76b05a56c06200ad10306e8764e2","href":"https://static.observableusercontent.com/files/702f7c6bdce284fd6565fe62322b2b1b9c0c3934827f421a9267d3851ce148d803625cacd6ca8ac12c5e29b8b0b0d721565b76b05a56c06200ad10306e8764e2","name":"snippets.png","type":"image/png","lastModified":1651076453371.714,"size":98609}] 2d:{"id":"b13127728eed2c9c","slug":"observable-101-input","title":"Input e view: scateniamo la libertà degli utenti","thumbnail":"4f183f27d0af46269117c3aa324052dea465bf1ea1f9679ce261cd3df2db1dd9","access_level":"public","create_time":"$D2022-04-27T13:40:06.627Z","update_time":"$D2022-06-03T09:10:38.523Z","view_time":null,"first_public_time":"$D2022-05-17T14:00:50.660Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"88f99d18d1aef515","login":"floatingpurr","name":"Andrea Mignone","avatar_url":"https://avatars-next.observableusercontent.com/3a51be34742b049fe39505055151eccd7f613bd00b2547203960fe5684ed9bab","tier":"starter_2024"},"version":306,"publish_version":306,"role":null,"authored":false,"authors":[{"type":"individual","id":"820f3b923b10f6c4","login":"floatingpurr","name":"Andrea Mignone","avatar_url":"https://avatars-next.observableusercontent.com/3a51be34742b049fe39505055151eccd7f613bd00b2547203960fe5684ed9bab","tier":null}],"members":[{"type":"individual","id":"820f3b923b10f6c4","login":"floatingpurr","name":"Andrea Mignone","avatar_url":"https://avatars-next.observableusercontent.com/3a51be34742b049fe39505055151eccd7f613bd00b2547203960fe5684ed9bab","tier":null,"role":"editor"},{"type":"individual","id":"29cc64fdabaa8a07","login":"floatingpurr-demo","name":"Andrea Mignone (demo account)","avatar_url":"https://avatars-next.observableusercontent.com/c53b4e6c34435e13ca0d5d70f2c68900dcdf68707af50b8ecc5bc8abc27fbd3d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"3f06447db5d918a3","slug":"observable-101","title":"Observable 101 🤌","owner":{"id":"88f99d18d1aef515","login":"floatingpurr","name":"Andrea Mignone"}},"type":"notebook","body":{"title":"Input e view: scateniamo la libertà degli utenti","cells":[{"id":0,"value":"# Input e _view_: scateniamo la libertà degli utenti\n\nUn notebook può essere interattivo, fornendo all'utente degli elementi di input. In Observable, possiamo usare puro _HTML_ per costruire i medesimi elementi di input che troviamo in ogni sito Web ([bottoni](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button), [menu a tendina](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), ecc...).\n\n> 👉 Gli **input** abilitano un'**interattività user-friendly**\n\nObservable gestisce queste funzionalità con un tipo di elemento chiamato `view`.\n\n> 👉 Le **view** sono degli elementi di interfaccia che contengono **due parti**:\n> 1. 📦 L'elemento interattivo del DOM (~ _la **scatola** che contiene il valore e permette di interagirvi_)\n> 2. 📝 Il valore stesso (~ _il **contenuto** della scatola_)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"## ⚠️ Bonus: come funziona una view dietro le quinte?\n\nPer esempio, selezioniamo una provincia da questo dropdown:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"provincia = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"Se richiamiamo la cella `provincia` stiamo facendo riferimento alla scatola 📦 e non al contenuto!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"provincia","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"Possiamo usare `provincia.value` per intercettare il contenuto della scatola 📝 \n\n**Yeah! Ci siamo quasi** 🎉🎉🎉\n\n... ma dato che la scatola in sé non cambia al variare del suo contenuto, la cella contenete `provincia.value` non viene aggiornata contestualmente alla variazione di cosa ha dentro. Devo eseguirla manualmente, perdendo tutti i benefici del reactive dataflow! Prova a selezionare un provincia nel [dropdown](#provincia) e a eseguire la cella qui sotto:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":173,"value":"**Mi piacerebbe visitare ${provincia.value}**","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"Per fortuna ci viene in aiuto l'operatore `viewof`, permettendoci di definire scatola 📦 e contenuto 📝 nella stessa cella! E' come se stessimo creando una cella nascosta che mette a disposizione del notebook il contenuto della cella. \n\nEcco qui un altro esempio. Scegli di nuovo una provincia:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"viewof provinciaBedda = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"**Mi piacerebbe visitare ${provinciaBedda}**","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":295,"value":"L'esecuzione reattiva è quindi garantita! 🎉🎉🎉 🎉🎉🎉 🎉🎉🎉 🎉🎉🎉","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":220,"value":"## Una libreria di input pronti all'uso!\n\nObservable mette a disposizione una vasta libreria di [input precotti](https://observablehq.com/@observablehq/inputs) da riusare nei notebook. Ecco un esempio:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":230,"value":"viewof provinciaTantuBedda = Inputs.select(\n [\n \"Agrigento\",\n \"Caltanissetta\",\n \"Catania\",\n \"Enna\",\n \"Messina\",\n \"Palermo\",\n \"Ragusa\",\n \"Siracusa\"\n ],\n { label: \"Dove vuoi andare?\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"**Mi piacerebbe visitare ${provinciaTantuBedda}**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"> 👉 Observable mette a disposizione una libreria di **input** pronti all'uso. Ricordiamoci di usare l'operatore **viewof** per accedere al loro contenuto interattivo\n\nPossono essere facilmente inseriti tramite gli **snippet** del menu laterale.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":277,"value":"

Gli snippet sono un comodo strumento per inserire frammenti funzionali di codice

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":305,"value":"Prossima lezione","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":256,"value":"### Referenze\n- 👓 [Cosa sono le `view`?](https://observablehq.com/@observablehq/introduction-to-views)\n- 📦 [Una intro a `viewof`](https://observablehq.com/@observablehq/a-brief-introduction-to-viewof)\n- 📃 [DOM e HTML](https://observablehq.com/@observablehq/introduction-to-html)\n- 🧑‍🍳 [Gli input pronti all'uso in Observable](https://observablehq.com/@observablehq/inputs)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"