Last active
March 26, 2019 00:12
-
-
Save catmando/67060cc0fd9be1d7bcc27b3bc86557b9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class TodoIndex < HyperComponent | |
# TodoIndex is the conventional name for listing | |
# a set of items. | |
INITIAL_TODOS = [ | |
{ | |
todo: 'clean the house' | |
}, | |
{ | |
todo: 'buy milk' | |
} | |
] | |
before_mount { @list = INITIAL_TODOS.dup } | |
def create_new_todo_item | |
mutate @list << { todo: @todo }, @todo = nil | |
end | |
render(DIV, class: 'ToDo') do | |
IMG(class: 'Logo', src: 'assets/logo.png', alt: 'Hyperstack Logo') | |
H1(class: 'ToDo-Header') { 'Hyperstack To Do' } | |
DIV(class: 'ToDo-Container') do | |
DIV(class: 'ToDo-Content') do | |
@list.each do |item| | |
TodoItem(key: item, item: item[:todo]) | |
.on(:delete_item) { mutate @list.delete(item) } | |
end | |
end | |
DIV do | |
INPUT(type: :text, value: @todo) | |
.on(:change) { |e| mutate @todo = e.target.value } | |
.on(:enter) { create_new_todo_item } | |
BUTTON(class: 'ToDo-Add') { '+' } | |
.on(:click) { create_new_todo_item } | |
end | |
end | |
end | |
end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment