Views: 3040
Last Modified: 11.05.2022

  Class $Bitrix.Application

This class allows to forward an application link (execution context) and when app (controller) methods from the component of any nesting level.

You can also use an event-driven model. You can find more details in the article: Event-driven model.

Access to functions inside the component is performed in the same manner as in any other variable – via this.. There are, however, nuances of use in the hook beforeCreate that are detailed in the chapter description.

Methods $Bitrix.Application
$Bitrix.Application.set Method sets link to application (execution context).
$Bitrix.Application.get Method gets link to application (execution context).

$Bitrix.Application.set

Method saves link to application (execution context).

this.$Bitrix.Application.set(instance: Object): void

Parameters:

Parameter Description
instance Link to application object (for subsequent access).

Example:

import {BitrixVue} from 'ui.vue3';

class TaskManager
{
	...
	attachTemplate(): void
	{
		const context = this;

		this.#application = BitrixVue.createApp({
			name: 'TaskManager',
			components: {
				TaskManger
			},
			beforeCreate(): void
			{
				this.$bitrix.Application.set(context);
			},
			template: '<TaskManger/>'
		});
		this.#application.mount(this.rootNode)
	}
	...
}

$Bitrix.Application.get

Method gets link to application (execution context).

this.$Bitrix.Application.get(): Object

Result:

Object – link to application object, must be set when creating Vue application.

Example:

const Component = {
	...
	methods: 
	{
		close() 
		{
			this.$Bitrix.Application.get().closeWindow();
		}
	},
	// language=Vue
	template: `
		<div class="component">
		    ...
			<button @click="save">Save</button>
			<button @click="close">Close</button>
		</div>
	`
});

Other example with the context forwarding is overviewed in detail in the article: Example of completed Vue application.





Courses developed by Bitrix24