Skip to content

Instantly share code, notes, and snippets.

@natecavanaugh

natecavanaugh/MyComponent.js

Last active August 29, 2015 14:20
Show Gist options
  • Save natecavanaugh/c9d98fceb794757abe73 to your computer and use it in GitHub Desktop.
Save natecavanaugh/c9d98fceb794757abe73 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. natecavanaugh revised this gist May 6, 2015. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions MyComponent.soy
    View file
    Original file line number Diff line number Diff line change
    @@ -25,10 +25,8 @@
    * @param foo
    */
    {template .body}
    <p>
    <input name="foo" type="text" value="{$foo}" data-oninput="updateBD" />
    {$bodyContent}
    </p>
    <p>{$bodyContent}</p>
    {/template}

    /**
  2. natecavanaugh created this gist May 6, 2015.
    56 changes: 56 additions & 0 deletions MyComponent.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    import core from 'metaljs/src/core';
    import dom from 'metaljs/src/dom/dom';
    import SoyComponent from 'metaljs/src/soy/SoyComponent';
    import ComponentRegistry from 'metaljs/src/component/ComponentRegistry';
    import './MyComponent.soy.js';

    class MyComponent extends SoyComponent {
    constructor(opt_config) {
    super(opt_config);
    }

    updateBD(event) {
    this.bodyContent = event.target.value;
    }

    setBodyContent() {
    this.bodyContent = 'test';
    }

    syncVisible(visible) {
    this.element.style.display = visible ? null : 'none';
    }
    }

    MyComponent.ATTRS = {
    bodyContent: {
    validator: core.isString,
    value: ''
    },

    foo: {
    validator: core.isString,
    value: 'FOO'
    },

    headerContent: {
    validator: core.isString,
    value: ''
    },

    footerContent: {
    validator: core.isString,
    value: ''
    },

    visible: {
    validator: core.isBoolean,
    value: true
    }
    };

    MyComponent.ELEMENT_CLASSES = 'mycomponent';

    ComponentRegistry.register('MyComponent', MyComponent);

    export default MyComponent;
    40 changes: 40 additions & 0 deletions MyComponent.soy
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    {namespace Templates.MyComponent}

    /**
    * This renders the main element. Component template parts are called from
    * this template by invoking, e.g. `{delcall MyComponent.header data="all" /}`.
    * Component parts could be named by the developer.
    */
    {template .content}
    {delcall MyComponent.header data="all" /}
    {delcall MyComponent.body data="all" /}
    {delcall MyComponent.footer data="all" /}
    {/template}

    /**
    * This renders the header part of the component.
    * @param headerContent
    */
    {template .header}
    {$headerContent}
    {/template}

    /**
    * This renders the body part of the component.
    * @param bodyContent
    * @param foo
    */
    {template .body}
    <p>
    <input name="foo" type="text" value="{$foo}" data-oninput="updateBD" />
    {$bodyContent}
    </p>
    {/template}

    /**
    * This renders the footer part of the component.
    * @param footerContent
    */
    {template .footer}
    {$footerContent}
    {/template}