20. WHY RIOT
easy to use
▸ script in html
▸ very simple usage
<todo>
<!-- layout -->
<h3>{ opts.title }</h3>
<ul>
<li each={ item, i in items }>{ item }</li>
</ul>
<form onsubmit={ add }>
<input>
<button>Add #{ items.length + 1 }</button>
</form>
<!-- logic -->
<script>
this.items = []
add(e) {
var input = e.target[0]
this.items.push(input.value)
input.value = ''
}
</script>
<todo>
<body>
<!-- place the custom tag anywhere inside the body -->
<todo></todo>
<!-- include riot.js -->
<script src="riot.min.js"></script>
<!-- include the tag -->
<script src="todo.js" type="riot/tag"></script>
<!-- mount the tag -->
<script>riot.mount('todo')</script>
</body>
20
21. WHY RIOT
make small
1. create html ٩(๑´3｀๑)۶
2. separate tags
3. 「hum… it’s large」(´・ω・｀)
4. separate tags
5. repeat 1 … 4 ٩(๑`^´๑)۶
possible to turn a lot of small cycle!!
21
24. USE CASE
there is a problem also…
‣ take over all of the data on child
becomes larger,
there is danger of conflict!!!
todoList.todos => { todos }
todoList.tags.todo => { todos, name, description }
todoList.tags.todo.tags.description => { todos, name, description, content }
24
25. USE CASE
use case
‣ try quickly ideas
‣ make a small app
‣ when just want to write
‣ in combination with other libraries
started small,
until the scale of the moderate
25
