Просмотров: 1903 (Статистика ведётся с 06.02.2017)

Анна Кокина

Сложность урока:

4 уровень - сложно, требуется сосредоточится, внимание деталям и точному следованию инструкции.

1

2

3

4

5

Недоступно в редакциях:

Ограничений нет

Все Vue-компоненты в рамках Bitrix Framework, как и их стандартные php-компоненты, должны иметь поддержку локализаций. Для этого необходимо подготовить вычисляемое свойство Вычисляемые свойства и слежение

Встраиваемые в шаблоны выражения удобны, но могут предназначаться только для простых операций. При усложнении логики их труднее поддерживать.

Подробнее... computed.localize:

computed: 
{
	localize(state)
	{
		return BX.Vue.getFilteredPhrases('PREFIX_');
	}
}

Метод BX.Vue.getFilteredPhrases прочитает объект BX.message и выберет только те фразы, которые относятся к вашему компоненту (по префиксу) и добавит их в шаблонизатор.

В шаблоне вы будете использовать их в таком формате:

template: ` 
	<div :title="localize.PREFIX_NAME_TITLE">
		<div>{{localize.PREFIX_NAME}}</div>
		<div v-html="localize.PREFIX_NAME_WITH_HTML"></div>
	</div>
`

Обратите внимание, если вам требуется вставить локализацию вместе с html-разметкой, используйте для этого v-html. Однако в таком случае вы должны быть уверены, что во фразе нет XSS-инъекций. XSS (англ. Cross-Site Scripting — «межсайтовый скриптинг») — тип атаки на веб-системы, заключающийся во внедрении в выдаваемую веб-системой страницу вредоносного кода (который будет выполнен на компьютере пользователя при открытии им этой страницы) и взаимодействии этого кода с веб-сервером злоумышленника. Является разновидностью атаки «Внедрение кода».

Подробнее...

В таком случае, вам нужно будет использовать следующую конструкцию:

computed: 
{
	localize(state)
	{
		return Object.freeze({
			...BX.Vue.getFilteredPhrases('PREFIX_'), 
			'PREFIX_NAME_WITH_HTML': removeAllXssFunction(BX.message('PREFIX_NAME_WITH_HTML'))
		});
	}
}

Инъекции в шаблон

Почему нельзя использовать BX.message внутри шаблона, например, так?

template: ` 
	<div :title="'BX.message('PREFIX_NAME_TITLE')">
		<div>${BX.message('PREFIX_NAME')}</div>
	</div>
`

Можно, но такой подход (инъекции в шаблон) не принят в сообществе Vue. Все данные, которые появляются в шаблоне, должны быть внутри шаблонизатора либо как свойства, либо как вычисляемые свойства.

Кроме того, необходимо будет всегда отслеживать, чтобы во фразах не было XSS-уязвимостей.

Если по какой-то причине вы не хотите использовать функцию BX.Vue.getFilteredPhrases, то можно собрать справочник фраз самостоятельно, используя следующий формат:

computed: 
{
	localize(state)
	{
		return Object.freeze({
			'PREFIX_NAME_TITLE': BX.message('PREFIX_NAME_TITLE'),
			'PREFIX_NAME': BX.message('PREFIX_NAME')
		})
	}
}

Подробнее о интерполяции можно прочитать в документации Vue Интерполяции. Интерполяции

Наиболее простой способ связывания данных — это текстовая интерполяция с использованием синтаксиса Mustache (двойных фигурных скобок).

Выражение в фигурных скобках будет заменено значением свойства msg соответствующего объекта данных. Кроме того, оно будет обновлено при любом изменении этого свойства.

Подробнее...

Подробнее о вычисляемых свойствах вы можете прочитать в документации Vue Вычисляемые свойства. Вычисляемые свойства

Встраиваемые в шаблоны выражения удобны, но могут предназначаться только для простых операций. При усложнении логики их труднее поддерживать.

Подробнее...