Ember.js addon: Inplace edit
ember-cli-inplace-edit is a small addon to add inplace editing capabilities to your views. This is a fork and credits go to Mike Szörnyi for the original implementation. I just adapted it to an ember-cli addon which can be installed using npm.
Installation
npm install ember-cli-inplace-edit
Usage
TextField
<div class="row description">
{{view "inplace-text-field" contentBinding="title"}}
</div>
title is an attribute in your currently used scope, which is usally a model.
TextArea
<div class="row description">
{{view "inplace-text-area" contentBinding="title"}}
</div>
title is an attribute in your currently used scope, which is usally a model.
Both versions are rendering the content for the given field and registering a click event on its surrounding div. The view will be replaced with an HTML input field or textarea for editing. After a field is loosing focus the changes will be stored and commited.
Additional Options
If a field content is empty and not in editing mode, a default text will be shown. You can customize this text by setting a value for attribute emptyValue
<div class="row description">
{{view "inplace-text-area" contentBinding="title" emptyValue="click here to add some text"}}
</div>
You may need to render the text with some customization (e.g. rendering with markdown helper). For these cases just pass a block to a view and make sure you are using a hash (#)
<div class="row description">
{{#view "inplace-text-area" contentBinding="title"}}
Render this custom text if not editing and not empty
{{markdown title}}
{{/view}}
</div>
Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'add feature xyz') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request
Credits
This is a fork and credits go to Mike Szörnyi for the original implementation. I just adapted it to an ember-cli addon which can be installed using npm.