mirror of
https://github.com/discourse/discourse.git
synced 2024-12-19 13:34:00 +08:00
f6a4de4805
Collections were an existing concept in FormKit but didn't allow nesting. You can now do infinite nesting:
```gjs
<Form
@data={{hash
foo=(array
(hash bar=(array (hash baz=1))) (hash bar=(array (hash baz=2)))
)
}}
as |form|
>
<form.Collection @name="foo" as |parent parentIndex|>
<parent.Collection @name="bar" as |child childIndex|>
<child.Field @name="baz" @title="Baz" as |field|>
<field.Input />
</child.Field>
</parent.Collection>
</form.Collection>
</Form>
```
On top of this a new component has been added: `Object`. It allows you to represent objects in your form data. Collections are basically handling arrays, and Objects are objects.
This is useful if you form data has this shape for example:
```javascript
{ foo: { bar: 1, baz: 2 } }
```
This can now be mapped in your form using this syntax:
```gjs
<Form @data={{hash foo=(hash bar=1 baz=2)}} as |form|>
<form.Object @name="foo" as |object name|>
<object.Field @name={{name}} @title={{name}} as |field|>
<field.Input />
</object.Field>
</form.Object>
</Form>
```
Objects accept nested collections and nested objects. Just like Collections.
A small addition has also been made to `Collection`, they now support a custom `@tagName`, it's useful if each item of your collection is the row of a table for example.
|
||
|---|---|---|
| .. | ||
| common | ||
| desktop | ||
| mobile | ||
| vendor | ||
| admin_rtl.scss | ||
| admin.scss | ||
| color_definitions.scss | ||
| common.scss | ||
| desktop_rtl.scss | ||
| desktop.scss | ||
| embed.scss | ||
| ember_cli.scss | ||
| mobile_rtl.scss | ||
| mobile.scss | ||
| publish.scss | ||
| qunit-custom.scss | ||
| qunit.scss | ||
| wcag.scss | ||
| wizard_rtl.scss | ||
| wizard.scss | ||