Skip to content

Instantly share code, notes, and snippets.

@FossiFoo
Created July 1, 2017 16:35
Show Gist options
  • Save FossiFoo/a19ca242b940c45984326e4bf4748221 to your computer and use it in GitHub Desktop.
Save FossiFoo/a19ca242b940c45984326e4bf4748221 to your computer and use it in GitHub Desktop.
Implementation of the example used to show react:
~~~
bind
[#ui/div | children:
[#ui/div text: "Jokes"]
[#ui/div | children:
[#ui/ul #joke-list]]
[#ui/div | children:
[#ui/input #add-joke, placeholder: "Insert an id"]
[#ui/button #add-btn, text: "Add joke"]]]
~~~
Add the joke on clicking the add button
~~~
search
[#html/event/click element: [#add-btn]]
[#add-joke value]
url = "http://api.icndb.com/jokes/" + value
commit
[#joke id: value, state: "added", url]
~~~
We show each joke as a list entry containing it's content and a delete button
~~~
search
joke = [#joke id state url]
not(joke.state = "deleted")
parent = [#joke-list]
text = if state = "fetched" then joke.joke else "-"
bind
parent.children +=
[#ui/li id: "joke-" + id, sort: id | children:
[#ui/span text: "{{id}}: {{text}} ({{state}})"]
[#ui/button #del-btn, text: "Delete", data-id: id]]
~~~
When we have added a joke, we want to fetch the content from the API.
~~~
search
joke = [#joke state: "added", url, id]
commit
[#http/get url, reqtype: "joke"]
joke.state := "loading"
~~~
When the request is returned successfully, we add the joke and set it's state accordingly.
~~~
search
data = [#http/response reqtype: "joke", id]
joke = [#joke id: "" + id, state: "loading"]
commit
joke.joke := data.joke
joke.state := "fetched"
~~~
We can mark a joke as "deleted" to hide it.
~~~
search
[#html/event/click element: [#del-btn data-id]]
joke = [#joke id: data-id]
commit
joke.state := "deleted"
~~~
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment