SoyComponent Error Example

MyComponent.js

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;

MyComponent.soy

{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}
	<input name="foo" type="text" value="{$foo}" data-oninput="updateBD" />
	<p>{$bodyContent}</p>
{/template}

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