Dotvvm controls

🇨🇿 Discussion in Czech
1

Zdravím, našeptávač mi ukazuje dot:HierarchyRepeater nebyl by někde příklad?
Děkuji T.

2

Dobrý den, koukám, že jsme o tom zapomněli napsat dokumentaci. Základní použití je zmíněné v release notes verze 4.1 Release DotVVM 4.1 · riganti/dotvvm · GitHub, detailnější “příklady” můžete kdyžtak najít v našich UI testech: Add HierarchyRepeater by cafour · Pull Request #1206 · riganti/dotvvm · GitHub

Jeden z příkladů:

  • Ve viewmodelu máme kolekci Roots, každý Node má pak property Children stejného typu - to tvoří výslednou hierarchii
    • Na Roots se odkazuje DataSource, na Children ItemChildrenBinding. To dvě povinné property toho repeateru.
  • LevelWrapperTagName je HTML element kterým chcete obalit každou kolekci Nodů (jak Children, tak Root)
  • ItemWrapperTagName je HTML element kterým chcete obalit jen konkrétní Node, včetně vnořených prvků. Nejdříve se do stránky vloží template (vnitřek repeateru), pak vnořený LevelWrapperTagName.
  • Oba tyto elementy jsou dobrovolné - pokud je neurčíte, tak se obsah nebude vnořovat
  • Atributy na wrapper elementy můžete přidat použitím prefixu Level/Item, viz LevelClass a ItemClass v příkladu níže
        public List<Node> Roots { get; set; }
        public class Node
        {
            ...
            public List<Node> Children { get; set; } = new();
        }

    <dot:HierarchyRepeater DataSource={value: Roots}
                           ItemChildrenBinding={value: Children}
                           LevelWrapperTagName="ul"
                           LevelClass="level"
                           ItemWrapperTagName="li"
                           ItemClass="item"
                           RenderSettings.Mode="Client">
        <span>{{value: Name}}</span>
        <dot:Button Click={command: _root.ClickNode(_this)} />
    </dot:HierarchyRepeater>
3

Děkuji i za příklad.
T.