UI Toolkit

[mikermcneil]

New component and model interfaces

(available on every component and model)

Lock/Mutex Interface

Useful to prevent race conditions during animations, modal dialogs, loading, etc.

Component events

• beforeLock
• cancelLock
• afterLock

Component methods

• component.lock() method (prevent global route changes, prevent closing of component, stop listening to DOM events, enter lock state)
• component.unlock() method (allow global route changes again, allows component to be closed, resumes listening to DOM events, leave lock state)

Timer

• Depends on moment.js
  Useful for triggering interval-based updates to the UI; particularly "current time" indicators, or "50 seconds ago" tags on posts/comments/etc. The latter scenario is supported out of the box by adding a computed attribute for every attribute of the model (prefixed with a key) which is a JavaScript date (this computation is recomputed onTimer, and the new attributes are noticed onChange)

So if you have:
myModel.createdAt === new Date()

Then you might have:
myModel._since_createdAt === 'just now

Then, however fast your frequency is set to, you'll see the computed attribute update (which should trigger bindings in your component). The "ago" number will go up.
or myModel._since_createdAt === '45 seconds ago

Model options

• timer.frequency
  • How often the timer should run onTimer in seconds (default 1)

Model events

• onTimer (logic to run on top of the default behavior-- note that it won't override the default, just give you other options to time stuff, etc.)

Built-in components

Uses built-in templates which are well documented and may be overridden. Bundled with Foundation framework LESS files.

Utility

Loading Spinner

ui.spin

• Depends on spin.js
  spin.js-powered component, ui.spin can be attached to regions. e.g. in a method in your component: this.someRegion.attach('ui.spin')

Tooltip

ui.tooltip
Meant to be appended to the app region, this tooltip description box will be automatically attached where your mouse is in a sensible way. It's template receives a handful of well documented classes as the tooltip needs to be dynamically repositioned at different areas of the screen, and is fairly simple to extend.

Forms

Datepicker

ui.datepicker
Also includes support for date ranges.

Hour picker

ui.hourpicker
Also includes support for same-day hour ranges.

Select

ui.select
HTML+CSS, friendly custom, mobile-compatible multiple-choice dropdown menu, along w/ associated logic+hacks

Auto-complete

• Depends on ui.spin
ui.autocomplete
  Extendable built-in interface for creating autocomplete fields. Contains logic for automatically fetching data from a collection. Uses whatever collection you pass it.

Data

Search Field

ui.searchable
Extendable built-in interface for creating autocomplete fields. Contains logic for firing global search events, namespaced as you like.

List View

• Depends on ui.spin
ui.list
  Extendable built-in interface for creating dynamic lists with empty, error,and loading states. Uses whatever collection you pass it.

Tree View

• Depends on ui.spin
ui.tree
  Extendable built-in interface for creating nested-depth hierarchies (like filesystem, grouped lists, etc.). Contains logic for automatically fetching data from a collection and then rendering it up to n levels deep. Also contains logic for error, empty, and loading state on a holistic and per-group basis. Uses whatever collection you pass it-- assumes that all but the leaf-level models will have an attribute called children (configurable).

Progress Bar

ui.progressbar
name says it all

D3 Context

ui.d3
Built-in component used for embedding a d3 context. Accepts a backbone model, collection, or both, and has all the expected hooks for data bindings

[mikermcneil]

@ghernandez345 got any ideas here?

[ghernandez345]

there look good. I would also consider a modal window.

[mikermcneil]

Closing this, since it's not part of the core.