[ADD] owl framework 101#1300
Conversation
|
|
sreedevk
force-pushed
the
19.0-srkod-owl-framework-101
branch
5 times, most recently
from
e9d5660 to
396bc2e
Compare
sreedevk
force-pushed
the
19.0-srkod-owl-framework-101
branch
from
396bc2e to
59a42a6
Compare
PURPOSE Learn the basics of the Owl framework and of the Odoo web framework, which is built on top. task-6250237
sreedevk
force-pushed
the
19.0-srkod-owl-framework-101
branch
from
59a42a6 to
91a463c
Compare
Megaaaaaa
left a comment
Megaaaaaa
left a comment
There was a problem hiding this comment.
Hello 👋
Mostly looks good to my not-so-js-trained eye. Just some tiny things we like to do another way and I wanted to show you. It works in both cases anyway but so you see the Odoo way :)
Tell me if anything is not clear enough or if you have more questions!
| import { Component, useState } from '@odoo/owl' | ||
|
|
||
| export class Counter extends Component { | ||
| static template = "awesome_owl.counter"; |
There was a problem hiding this comment.
This component expects its parent to pass an onChange callback, so it is worth making that contract explicit in static props. It's helpful to everyone and you will avoid the "no explicit props declared" warning too 👍
| static template = "awesome_owl.counter"; | |
| static template = "awesome_owl.counter"; | |
| static props = { | |
| onChange: Function, | |
| }; |
| <span class="badge bg-warning text-dark rounded-pill px-2 py-1">Pending</span> | ||
| </t> | ||
|
|
||
| <span class="fa fa-remove text-danger cp ms-2" |
There was a problem hiding this comment.
This is a clickable control, so it should be a button rather than a span. Buttons are keyboard-focusable by default so it's preferable to use them in these situations 👍
| <span class="fa fa-remove text-danger cp ms-2" | |
| <button type="button" class="btn btn-link text-danger p-0 ms-2" t-on-click="() => props.removeTodo(props.todo.id)"> | |
| <i class="fa fa-remove"/> | |
| </button> |
| } | ||
|
|
||
| createItem(ev) { | ||
| if (ev.keyCode === 13) { |
There was a problem hiding this comment.
keyCode works in many browsers but it is less self-explanatory and we like self-explanatory. Checking the key name directly reads like the behavior we want: create an item when the user presses Enter.
| if (ev.keyCode === 13) { | |
| if (ev.key === "Enter") { |
| <t t-if="items.length > 0"> | ||
| <t t-foreach="items" t-as="todo" t-key="todo.id"> | ||
| <TodoItem todo="todo" | ||
| toggleState="toggleItem.bind(this)" |
There was a problem hiding this comment.
You can use Owl dedicated .bind syntax for passing component methods as callbacks. It's the Owl-native way to wire child events back to the parent. It's just to show you 👍
| toggleState="toggleItem.bind(this)" | |
| toggleState.bind="toggleItem" |
| <t t-foreach="items" t-as="todo" t-key="todo.id"> | ||
| <TodoItem todo="todo" | ||
| toggleState="toggleItem.bind(this)" | ||
| removeTodo="deleteItem.bind(this)"/> |
3 participants
No description provided.