Simple in-place editing integrated with component/model

$ component install ericgj/editable-model

See test/index.html.

Construct the editable component bound to the given model instance.

If el given, all child elements with class editable are automatically bound to the model attribute matching their data-model-attr element attribute, and edited using 'contenteditable'. Also, keyboard event bindings are scoped to the given el. Note this behavior may change (see TODO below).

Enter 'edit' mode. All associated editable components are made editable.

Exit 'edit' mode, saving the model changes, if model is dirty.

Exit 'edit' mode, reverting any changes to the model.

True if in 'edit' mode, false otherwise.

Bind the given element to the given attribute of the model.

Keydown bindings for triggering done() while in edit mode. By default, "enter". See yields/k for syntax for keys.

Keydown bindings for triggering cancel() while in edit mode. By default, "esc".

• edit model
• done model
• cancel model

No assumptions are made about how users enter edit mode. It's up to the calling context to trigger edit() from an event callback.

By default, exiting edit mode is triggered through "enter" (done) and "esc" (cancel) keydowns within a parent element. These can be disabled by setting doneKeys = null and cancelKeys = null, or changed to other key combinations. And of course external events can be wired up to trigger done and cancel.

Custom editable behavior. Right now editing is done via 'contenteditable', but this is too uncontrolled for many situations. Should be possible to specify custom editable classes to use instead.

MIT