Bitrix Framework

   Managing script (entry point, controller)

Such script is used to call the method to BitrixVue.createApp initialize Vue application and bind Vue to a required DOM element. Additionally, you can create a reverse binding to call controller methods from the Vue app.

Example:

/**
 * TaskManger Application
 *
 * @package demo
 * @subpackage local
 * @copyright 2001-2022 Bitrix
 */

import {BitrixVue} from 'ui.vue3';
import {Dom, Loc} from 'main.core';

import {TaskManger} from './component/task-manager';

export class TaskManager
{
	#application;

	constructor(rootNode): void
	{
		this.rootNode = document.querySelector(rootNode);
	}

	start(): void
	{
		const button = Dom.create('button', {
			text: Loc.getMessage('TASK_MANAGER_OPEN'),
			events: {
				click: () => this.attachTemplate()
			},
		});
		Dom.append(button, this.rootNode);
	}

	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)
	}

	detachTemplate(): void
	{
		if (this.#application)
		{
			this.#application.unmount();
		}

		this.start();
	}
}

Structure elements that require extra attention:

• We create the Vue app in the method attachTemplate() and save it in the variable this.#application. This allows to manage Vue application in the future.

• Now, let's handle to the webhook beforeCreate:

  beforeCreate(): void
  {
  	this.$bitrix.Application.set(context);
  }
  

  We forward context inside the application - find more details about this mechanism in the lesson Class for link forwarding to the app (execution context). Thanks to this approach, you can get access to the context using the method this.$Bitrix.Application.get() at any level of nesting (this will be useful for implementing the app disabling function).

• Next, let's overview the root component <TaskManger/> and how it interacts with the controller:

  import {Item} from './item';
  import "./task-manager.css";
  
  export const TaskManger =
  {
      components:
      {
          Item
      },
  
      data(): object
      {
          return {
              list: []
          }
      },
  
      methods:
      {
          addNew(): void
          {
              const result = prompt(this.$Bitrix.Loc.getMessage('TASK_MANAGER_QUESTION'));
              this.list.push(result);
          },
  
          close(): void
          {
              this.$Bitrix.Application.get().detachTemplate();
          },
      },
  
      // language=Vue
      template: `
          <div class="taskmanager-list">
              <div class="taskmanager-list-title">{{$Bitrix.Loc.getMessage('TASK_MANAGER_TODAY_TITLE')}}</div>
              <template v-for="(value, index) in list" :key="index">
                  <Item :position="index+1" :text="value"/>
              </template>
              <template v-if="list.length <= 0">
                  <div class="taskmanager-list-empty">{{$Bitrix.Loc.getMessage('TASK_MANAGER_LIST_EMPTY')}}</div>
              </template>
              <div class="taskmanager-list-buttons">
                  <button @click="addNew">{{$Bitrix.Loc.getMessage('TASK_MANAGER_ADD')}}</button>
                  <button @click="close">{{$Bitrix.Loc.getMessage('TASK_MANAGER_CLOSE')}}</button>
              </div>
          </div>
      `
  };
  

  Please note, you can execute methods of controller which initialized Vue app thanks to the method this.$Bitrix.Application.get().

  You can use the event-driven model as well. Please find more details in the article: Event-driven model - Site level events.

  Additionally, the listed example shows handling of localizations using $Bitrix.Loc.getMessage.

After creating controller and required components, the last thing to do is to load extension at the page and create a class instance:

<?
\Bitrix\Main\UI\Extension::load("local.taskmanager");
?>

<div id="application"></div>
<script type="text/javascript">
	const taskManager = new BX.TaskManager('#application');
	taskManager.start();
</script>

  Example

You can download and launch the example of component, described in this lesson. To do it, perform the following steps:

1. Download the example taskmanager (utf8);
2. Unpack the archive at the address /<installation path>/local/js/local/;
3. Create a public page and connect the extension:

   <?
   require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
   ?>
   
   <?
   \Bitrix\Main\UI\Extension::load("local.taskmanager");
   ?>
   
   <div id="application"></div>
   
   <script type="text/javascript">
   	const taskManager = new BX.TaskManager('#application');
   	taskManager.start();
   </script>
   
   <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
   

Do not forget about the transpiler, If you want to edit the component and add your own custom logic:

1. Open the terminal;
2. Go to the local extensions folder cd //local/js/;
3. Launch the transpiler in the change track mode bitrix build -w. You will see the following text after the launch:

    ✔ 12:30:32 Build extension local.taskmanager  js: 3 KB, css: 300 B
   

4. Update the page: you will see the introduced changes;
5. Upon new changes, just repeat the item 4.