Subtemplates

Sub templates let you render components from inside another component. This lets you scale your architecture for complex apps.

Syntax Types

Shorthand Syntax

The simplest way to specify a subtemplate is to include the template name and its values inlined into the expression.

{> userProfile name=(getFullname user.id) age=user.age}

Shorthand with Data Object

If you would like to return the data context as an object from an expression you can do that using the data property.

const createInstance = ({ self }) => ({
  getData(user) {
    return {
      name: self.getFullname(user.id),
      age: user.age
    }
  };
});

{> userProfile data=(getData user)

Verbose Syntax

Verbose syntax uses the syntax {> template name=templateName data=someData} and allows you to more explicitly define the name and data for a subtemplate. When using verbose expressions you can use an inline object for data or an expression.

Name Syntax - Be sure to use ' to enclose template names that are strings when using the name syntax, otherwise it will look for an expression called userProfile to evaluate

{> template
  name='userProfile'
  data={
    name: getFullname(user.id),
    age: user.age
  }
}

Advanced Uses

Dynamic Templates

Verbose syntax supports using an expression to return a template name. This means you can dynamically swap templates based on the returned value of a function. This can be incredibly useful in many advanced use cases.

const createInstance = ({ self }) => ({
  getProfileTemplate(user) {
    return user.isEmployee
      ? 'employeeProfile'
      : 'userProfile'
    ;
  };
});

{> template
  name=(getProfileTemplate user)
  data={
    name: (getFullname user.id),
    age: user.age
  }
}

Specifying Templates in Settings

You can use dynamic template names to even let users specify templates directly from settings objects. This can let users author their own templates that are then consumed by your component.

You can see an example of this in action below.

Data Reactivity

Reactive vs Nonreactive Data

By default all data passed into subtemplates is not automatically reactive. Reactivity is opt in and only supported in the verbose syntax. You can use the reactiveData syntax for data which you would like to be rendered in a reactive context

{> template
  name='userProfile'
  reactiveData={
    isLoggedIn: getLoginStatus
  }
  data={
    name: getFullname(user.id),
    age: user.age
  }
}

Examples

Basic Example

A template includes two values, the name or template name to render and data the data to pass into the subtemplate. Templates must be passed to the defineComponent call of a component that references a subtemplate.

This example uses the shorthand syntax for a subtemplate

{>row row=row company=company}

This will render a template named row with the data context set to

data = {
  row: row, // row in table is passed into row
  company: company // company in table is pass into row
};

This could also have been written with a helper that returns the data context getRowData

{>row data=getRowData}

Or using a verbose syntax that specifies the template name explicitly

{> template
  name='row'
  data={
    row: row,
    company: company
  }
}

Advanced Example

Exposing templates as a setting allows for complex use cases where a portion of the rendered template can be dynamic and specified by the user at run time.

This allows for more complex components that let users control how a portion of the component renders.

The following example shows exposing a setting which lets a user specify a template to render a row.

In index.js you can see where the template is imported and specified by the user who is consuming the component.