https://github.com/iliasderos/ember-ds-inline-edit

EmberJS addon for editing DS.models inline
https://github.com/iliasderos/ember-ds-inline-edit

ember-data emberjs inline-editing

Last synced: 3 months ago
JSON representation

EmberJS addon for editing DS.models inline

• Host: GitHub
• URL: https://github.com/iliasderos/ember-ds-inline-edit
• Owner: IliasDeros
• License: mit
• Created: 2016-12-14T02:44:52.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-08-16T20:11:37.000Z (over 2 years ago)
• Last Synced: 2024-10-14T06:43:05.870Z (3 months ago)
• Topics: ember-data, emberjs, inline-editing
• Language: JavaScript
• Size: 74.2 KB
• Stars: 6
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
[![npm badge](https://img.shields.io/npm/v/ember-ds-inline-edit)](https://www.npmjs.com/package/ember-ds-inline-edit)

Edit an ember DS.model inline by clicking on it to toggle editor.

Click outside or press escape to rollback change and cancel edit.

inspired by [ember-inline-edit](https://github.com/swastik/ember-inline-edit)

![Inline Edit Demo](https://github.com/IliasDeros/ember-ds-inline-edit/raw/master/demo.gif)

## Installation

`ember install ember-ds-inline-edit`

## Usage

Use the `ds-inline-edit` component and provide it a model with the property to edit/display.

```handlebars

  {{ds-inline-edit

    model=model

    prop='name'

    customUpdate=(action updateModelName)

    onError=(action send 'onError')

    onUpdate=(action send 'onUpdate')

  }}

```

Customize input template using `#ds-inline-edit` :

```handlebars

  {{#ds-inline-edit model=person prop='age' as |age|}}

    {{input type="number" class="form-control" value=age}}

  {{/ds-inline-edit}}

```

#### Ember Data Integration

By default, this plugin relies on a strict usage of Ember Data. An automatic model update is sent upon confirming edit. This behavior can be overriden by passing in a _customUpdate_ action :

`customUpdate(value, model, prop)`

If the `prop` is an object, the default display is the following property of the model :

`displayName` > `name` > `id`

Only the property identified through `prop` is updated, the rest of the model remains

uncommited.

When an update is successful, the `onUpdate` function is called with the updated model.

#### Extending this plugin

Feel free to extend `ds-inline-edit` using the following code :

```

// app/pods/components/ds-inline-edit

import DsInlineEdit from 'ds-inline-edit/components/ds-inline-edit'

export default DsInlineEdit.extend({})

```

You can override the following functions :

`onEditSuccess()` - Called when the model is updated successfully

`onEditError(error)` - Called on update failure (due to error from network or customUpdate)

#### Keyboard Support

Hit `enter` to confirm changes.

Hit `esc` or click outside the component to discard the changes.

#### Error Handling

When an error occurs, an `onError` action is executed.