Skip to content

New Component: {{fieldset-editor}} #19

@nadnoslen

Description

@nadnoslen

I've seen a pattern in my form-driven components.

  1. For almost every model that I want to edit I create a new form component that is an extension of the twbs-form component in this package. This is typically extension of the twbs-form. I feel that form should be responsible for persistence only.
  2. I feel a fieldset element (or editor) can be used to toggle between the read-only and editable version of the model in question.
    1. The following actions can be pushed into the component: cancel, destroy, new, and save.
    2. The template will accept a block that should effe

Component JS

import Ember from 'ember';

export default Ember.Component.extend({
  /**
   * REQUIRED.
   * The action to fire when the form is reset/cancelled.
   */
  actionCancel: '',

  /**
   * REQUIRED.
   * The action to fire when the model is asked to be destroyed.
   */
  actionDestroy: '',

  /**
   * REQUIRED.
   * The action to fire when the new plus button is pressed.
   */
  actionNew: '',

  /**
   * REQUIRED.
   * The action to fire when the form is saved.
   */
  actionSave: '',

  /**
   * `true` shows the edit for.  `false` hides the form (default).
   */
  'editor?': Ember.computed.notEmpty('modelInstance'),

  /**
   * REQUIRED.
   * The model instance to be edited.
   */
  modelInstance: undefined,

  /**
   * Is the model not yet persisted (e.g. brand new).
   */
  'new?': Ember.computed.bool('modelInstance.isNew'),

  tagName: 'fieldset'
});

Component Template

<legend></legend>
{{#if editor?}}
  {{!-- some sort of form here --}}
{{else}}
  {{yield (hash new?=new?))
{{/if}}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions