NativeScript-Vue 2.0: Back to the Vueture (Webinar) is now on YouTube
v-template

The <v-template> component lets you define markup that you can reuse as a template.

Props

NameTypeDescription
ifStringThe condition for using this template.
nameStringThe name of the template, auto-generated if omitted.

Basic usage

The <v-template> component is used internally by the ListView component to iterate over its list items.

Advanced usage

You can use v-template to implement custom components that require a template or multiple templates.

v-template does not render anything when placed in the template. Instead, it adds a $templates property to the parent element. This $templates property is a TemplateBag instance.

Next, v-template registers itself as an available template in the respective TemplateBag instance for the parent element. Any existing TemplateBag instance on the parent element is reused.

The TemplateBag class

The TemplateBag class lets you register multiple templates and select the correct template based on the item and the conditions provided for each template.

Templates are stored as objects conforming to the KeyedTemplate interface.

The selectorFn property

The selectorFn property returns a function that accepts a single parameter. This parameter is the item whose template is selected.

The single-parameter function goes through all templates registered in the TemplateBag instance and returns the first one where the if condition is met. If none of the templates match, returns default.

Available methods

MethodDescription
registerTemplate(name: String, condition: String?, scopedFn: Function): voidMainly used internally.
Registers templates in the TemplateBag instance.
The scopedFn should be a render function of a scoped slot
getConditionFn(condition: String): FunctionUsed internally.
Builds a function that evaluates the given condition.
getAvailable(): Array<String>Returns an array of available KeyedTemplates. (Returns an array of template names.)
getKeyedTemplate(name: String): KeyedTemplateReturns the KeyedTemplate with the specified name.
getKeyedTemplates(): Array<KeyedTemplate>Returns an array of all the KeyedTemplates registered in the TemplateBag.
patchTemplate(name: String, context: any, oldVnode: VNode?): ViewPatches an existing VNode using the provided context. If no oldVnode is provided, creates a new View instance for the specified template.
Contributors