https://github.com/ericgj/editable-model

Simple in-place editing integrated with component/model
https://github.com/ericgj/editable-model

Last synced: 9 days ago
JSON representation

Simple in-place editing integrated with component/model

• Host: GitHub
• URL: https://github.com/ericgj/editable-model
• Owner: ericgj
• Created: 2013-06-10T04:38:22.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-06-10T21:19:26.000Z (over 11 years ago)
• Last Synced: 2024-11-15T12:27:44.512Z (2 months ago)
• Language: JavaScript
• Size: 125 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md
  • Changelog: History.md

Awesome Lists containing this project

README

        

# editable-model

  Simple in-place editing integrated with component/model

  

## Installation

    $ component install ericgj/editable-model

## Example

See [test/index.html](/test/index.html).

## API

### EditableRec([el],model) 

   

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).

### EditableRec#edit()

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

### EditableRec#done()

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

### EditableRec#cancel()

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

### EditableRec#editing()

True if in 'edit' mode, false otherwise.

### EditableRec#addEditable(el,attr)

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

### EditableRec#doneKeys=

Keydown bindings for triggering done() while in edit mode. By default, "enter".

See [yields/k](https://github.com/yields/k) for syntax for keys.

### EditableRec#cancelKeys=

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

## Events

- `edit model`

- `done model`

- `cancel model`

## Notes

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`.

## TODO

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.

## License

  MIT