mirror of
https://github.com/centau/vide.git
synced 2026-08-20 23:01:37 +00:00
This commit is contained in:
parent
8e31946dda
commit
13965868ce
13 changed files with 421 additions and 448 deletions
39
docs/tut/crash-course/6-table-state.md
Normal file
39
docs/tut/crash-course/6-table-state.md
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
# [Table State](./index.md)
|
||||
|
||||
Vide has functions for dealing with table states.
|
||||
|
||||
Below is an example using the above `List` class.
|
||||
|
||||
```lua
|
||||
type Item = {
|
||||
Name: string,
|
||||
Icon: number
|
||||
}
|
||||
|
||||
local items = source({} :: Array<Item>)
|
||||
|
||||
List {
|
||||
Children = map(items, function(item, i)
|
||||
return create "ImageLabel" {
|
||||
Image = function()
|
||||
return "rbxassetid://" .. item().Icon
|
||||
end,
|
||||
|
||||
LayoutOrder = i
|
||||
}
|
||||
end)
|
||||
}
|
||||
```
|
||||
|
||||
Here we map each element in `items` to a value returned by a callback.
|
||||
|
||||
The callback is called only *once* per key. The first argument given to the
|
||||
callback is a state that has the value of the table key's value.
|
||||
|
||||
Anytime the value of the corresponding table key changes, the state value
|
||||
changes too. This saves us from having to recreate a UI element any time a
|
||||
table index changes.
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
### [← Derived State](./5-derived-state.md) | [Property Groups →](./7-property-groups.md)
|
||||
Loading…
Add table
Add a link
Reference in a new issue