UIZE JavaScript Framework

TO DO - Uize.Widget.List

This is a TO DO document for the proposed Uize.Widget.List widget module.

1. Problem

Uize.Widget.Collection and Uize.Widget.Options are the 2 primary widgets that operate on a dynamic list of child widget items/options. Both are a bit too heavy-weight when you really just want to bind an array state property to a dynamic set of DOM nodes.

While Uize.Widget.Options is probably the lighter of the two, both impose a concept of a selected item/option. In addition the child widgets (Uize.Widget.CollectionItem and Uize.Widget.Button) are pretty heavy themselves.

2. Proposal

The proposal is to create a new lightweight widget called Uize.Widget.List that will iterate over its list of items and build and wire markup for each item. Uize.Widget.Collection and Uize.Widget.Options could end up be subclasses of this lighter weight widget.

With Uize.Widget.List in place, a widget could use child bindings (via Uize.Widget.mChildBindings mixin), to bind its items state property to the items state property of its child list widget and the UI would update accordingly.

2.1. Differences between List vs. Collection

It's important to create a clean separation between what makes a list a list and what makes a collection a collection. The primary differences are...

Concept of selected item(s) including select all, select none options

3. Ideas

3.1. Item Widget

Each item itself will be a widget (Uize.Widget.ListItem). The list item widget will fire events like 'Click', 'Over', 'Out', etc. The parent list widget will then wire a '*' event on each item, firing a 'Item Event' and passing the child event along (like Uize.Widget.Options)

3.2. Mixed Items

The list should support mixed list items. The items don't have to be of the same widget class, just all descendents of Uize.Widget.ListItem.

3.3. Deferred Markup/Wiring

We don't want the UI to grind to a halt when there are a lot of items (hundreds or thousands), so the list widget should support deferred markup creationg and wiring.

3.4. Tabular Data

The list widget should work for items that are <div>s (or some other generic block-level element) as well as table rows. Potentially Uize.Widget.TableSort could also be a subclass of Uize.Widget.List.

3.5. Mix-ins

In order to keep the base widget lightweight, additional functionality should be factored out into separate mix-ins.

Some ideas...

Reordering (like in Uize.Widget.Collection.Dynamic)