Cacher is the code snippet organizer for pro developers

{namespace DemoComponent}

/**
 * DemoComponent
 */
{template .render}
  {@param namespace: string}
  {@param spritemap: string}
  {@param? id: string}
  {@param? _handleFormSubmit: any}

  <div id="{$id ?: ''}">
    <form class="form" data-onsubmit="{$_handleFormSubmit}">
      <div class="form-group">
        <svg class="lexicon-icon">
          <use xlink:href="{$spritemap}#demo-icon"></use>
        </svg>
  
        <input
          name="{$namespace}name"
          ref="nameInputField"
          type="text"
        />
      </div>
  
      <button class="btn btn-primary" type="submit">
        {msg desc=""}submit{/msg}
      </button>
    </form>
  </div>
{/template}

import Component from 'metal-component';
import Soy from 'metal-soy';
import {Config} from 'metal-state';

import templates from './DemoComponent.soy';

/**
 * DemoComponent
 */
class DemoComponent extends Component {
  /**
   * Handle form submission
   * @param {Event} event Submit event
   */
  _handleFormSubmit(event) {
    event.preventDefault();

    alert(this.refs.nameInputField.value);
  }
}

/**
 * State definition.
 * @type {!Object}
 * @static
 */
DemoComponent.STATE = {
  /**
   * Autogenerated id provided by the template engine
   * @default ''
   * @instance
   * @memberOf DemoComponent
   * @type {string}
   */
  id: Config.string().value(''),

  /**
   * Namespace of the portlet being used.
   * Necesary for getting the real inputs which interact with the server.
   * @default undefined
   * @instance
   * @memberOf DemoComponent
   * @type {!string}
   */
  namespace: Config.string().required(),

  /**
   * Path of the available icons.
   * @default undefined
   * @instance
   * @memberOf DemoComponent
   * @type {!string}
   */
  spritemap: Config.string().required(),
};

Soy.register(DemoComponent, templates);

export {DemoComponent};
export default DemoComponent;