Ember-x-editable

ember-x-editable is built and maintained by Ship Shape. Contact us for Ember.js consulting, development, and training for your project.

Ember-x-editable is inspired by x-editable. It does not have all the same features, and it possibly never will, but I needed an x-editable that played nicely with Ember, so I decided to write this. If you would like to add functionality, please feel free to submit a PR.

Currently, Bootstrap is bundled with this addon. Eventually, I'd like to just add a dependency on the ember bootstrap addon, or allow it to work without bootstrap. This addon also only works with HTMLBars and Ember 1.11+.

Demo

http://shipshapecode.github.io/ember-x-editable/

Usage

NOTE: This addon now uses contextual components, so if you were using it previously, and you update, you will need to fix things.

Text Inputs

{{#ember-x-editable
fontFamilyConfig=fontFamilyConfig
isFieldEditing=isFieldEditing
validator=textValidator
value='TestString' as |x|}}
  {{x.text
    cancelAction=(action 'cancelAction')
    saveAction=(action 'saveAction')
  }}
{{/ember-x-editable}}

• cancelAction (optional) a string representing the action on the controller that you want to execute whenever the user clicks the cancel x.
• fontFamilyConfig an array of custom font families that will be passed to the font loader and ensured to be loaded and used for calculating the width of the text in pixels
• isFieldEditing a boolean variable that allows you to access the isEditing value outside of the component
• saveAction a string representing the action on the controller that you want to execute whenever the user clicks the save check mark.
• validator (optional) a function reference to execute against the content string before saving
• value a string of text to display

Textarea

{{#ember-x-editable
fontFamilyConfig=fontFamilyConfig
isFieldEditing=isFieldEditing
validator=textareaValidator
value='Textarea test value' as |x|}}
  {{x.textarea
    cancelAction=(action 'cancelAction')
    saveAction=(action 'saveAction')
  }}
{{/ember-x-editable}}

• cancelAction (optional) a string representing the action on the controller that you want to execute whenever the user clicks the cancel x.
• fontFamilyConfig an array of custom font families that will be passed to the font loader and ensured to be loaded and used for calculating the width of the text in pixels
• isFieldEditing a boolean variable that allows you to access the isEditing value outside of the component
• saveAction a string representing the action on the controller that you want to execute whenever the user clicks the save check mark.
• validator (optional) a function reference to execute against the content string before saving
• value a string of text to display

Dropdown (Select)

{{#ember-x-editable
content=selectContent
fontFamilyConfig=fontFamilyConfig
isFieldEditing=isFieldEditing
validator=selectValidator
value=2 as |x|}}
  {{x.select
    cancelAction=(action 'cancelAction')
    saveAction=(action 'saveAction')
  }}
{{/ember-x-editable}}

• cancelAction (optional) a string representing the action on the controller that you want to execute whenever the user clicks the cancel x.
• content An array of objects of the format: [{value: 1, text: 'TestString}]
• fontFamilyConfig an array of custom font families that will be passed to the font loader and ensured to be loaded and used for calculating the width of the text in pixels
• isFieldEditing a boolean variable that allows you to access the isEditing value outside of the component
• saveAction (optional) a string representing the action on the controller that you want to execute whenever the user clicks the save check mark.
• validator (optional) a function reference to execute against the content string before saving
• value the 'value' of the object in the content array that should be selected