Ember-jsonapi-resources-form
Ember Addon that provides components for use with forms to edit a resource that follows JSON API 1.0 specification.
- Use with the ember-jsonapi-resources addon
Example Use
For a simple example see the address-form
component usage in the dummy
app.
The resource-form
is an abstract component for CRUD operations on a Resource
instance (model).
To trigger actions include the form controls component in the template for your
component that extends resource-form
, and set the target…
Example template for a form component that extends the resource-form
:
{{form-controls target=this isEditing=isEditing isNew=isNew isAdmin=isAdmin}}{{text-input value=resource.name name="name" action="performUpdate" target=this requireInput=isEditing disabled=notEditing}}{{number-input value=resource.total min="0" step="1" name="total" action="applyChange" target=this requireInput=isEditing disabled=notEditing}}
Actions that interact with the various presentation modes of the form,
include: toPreview
(new resource), toDetail
/ toEdit
(persisted resource),
cancel
, save
, and destroy
.
A few examples using a (concrete) component which extends resource-form
…
For an "editing" route or 'editing' state of the form:
{{catalog-form model=model isNew=model.isNew isEditing=true on-update=(route-action 'update') on-toDetail=(route-action 'toDetail')}}
For a "Detail" route or "Preview" state of the form:
{{catalog-form model=model isNew=model.isNew isEditing=false on-edit=(route-action 'toEdit') on-destroy=(route-action 'destroy')}}
For a "New" route / state of the form:
{{catalog-form model=model isNew=model.isNew isEditing=false on-save=(route-action 'save') on-cancel=(route-action 'cancel')}}
A example form that adds behavior to edit relationships…
Form component
;; const get set inject computed = Ember; ;
Form template
{{form-controls target=this isEditing=isEditing isNew=isNew inFlight=inFlight}}<fieldset> <legend>Catalog Info</legend> {{#input-row label="Region" name="region"}} {{! text-input is bound to a value, use action to apply changes and persist}} {{text-input value=resource.region name="region" requireInput=isEditing disabled=notEditing action="performUpdate" target=this }} {{/input-row}} {{#input-row label="Total" name="total"}} {{! number-input doesn't bind to the value need, use action to set changes}} {{number-input min="0" step="15" value=resource.total name="total" requireInput=isEditing disabled=notEditing action="applyChange" target=this }} {{/input-row}} {{#input-row label="Product" name="product"}} {{#power-select placeholder="Choose a Product" disabled=notEditing selected=resource.product onchange=(action "selected") search=(action "search") as |product|}} {{product.name}} {{/power-select}} {{/input-row}}</fieldset>{{yield}}
Installation
In the consuming application…
ember install ember-jsonapi-resources-form
Development
Install dependencies…
git clone
this repositorynpm install
bower install
Running Tests
npm test
(Runsember try:testall
to test your addon against multiple Ember versions)ember test
ember test --server
For more information on using ember-cli, visit http://ember-cli.com/.