Некоторые шаблоны могут предоставлять DOM события. В частности шаблон
К DOM событиям, вызываемым на DOM элементе шаблона можно привязать обработчик события, используя аргумент шаблона. Аргументы шаблона начинающиеся с префикса fcfEvent, после которого следует имя события с большой буквы, считаются строковой Javascript инструкцией обработчика события. Внутри каждого обработчика события доступны следующие переменные:
fcf.NClient.Wrapper wrapper - объект враппера, для которого вызвано событиеfcf.NClient.Wrapper parent - объект владельца враппераEvent event - объект события
Нам нужно будет разместить панель редактирования свойств строк, но пока без сохранения состояния на стороне сервера. Мы будем использовать панель вкладок tab (шаблон
Шаблон вкладок
В нашем случае в качестве контента будет выступать шаблон, который можно разрендерить используя шаблонный аргумент, создаваемый функцией
Добавим вкладки для редактирования конфигурации. В качестве содержимого вкладки редактирования строк мы создадим подшаблон strings, в котором будет располагаться редактор строк с возможностью добавления и удаления отдельной строки. Каждая строка будет редактироваться шаблоном редактирования строки
Файл :templates/blocks/moving-containers.tmpl
{
// Basic inheritance template
// Default: undefined
// extends:"
// An array of roles that have permission to access the template
// Default: ["*"]
// access: ["*"],
// Automatic template update mode when the argument changes.
// Acceptable values:
// true|"all" - The update is performed on any change
// "external" - The update is performed only if the external template was the initiator of the change.
// false - The template is not being updated
// This option can be overridden by the fcfAutoUpdate template argument.
// Default: false
//autoUpdate: false,
// If true, the rendering is performed on the client side.
// Acceptable values:
// true|"all" - Rendering is done on the client, when done on the browser side
// "update" - The first render is done on the server side and the update is on the client side
// "update_np" - The first render is done on the server side and the update is on the client side.
// Parameters of the programmable type are not recalculated.
// false - Rendering is always done on the server side
// This option can be overridden by the fcfClientRendering template argument, but only if the option is true.
// Default: false
//clientRendering: false,
// Additional JS & CSS files to connect (JS files are also connected on the server side)
// Default: []
include: ["moving-containers.css"],
// Plug-in additional JS & CSS files on the client side
// Default: []
//clientInclude: [],
// If the parameter is false, the template is not wrapped in a container,
// a wrapper is not created for it, and its arguments are not available on the client.
// Default: true
//wrapper: true,
// DOM elements merge flag.
// If true, then existing items are not replaced when updated, but updated.
// Default: false
//merge: false,
// If set to true, the DOM elements are not changed by default when the template is updated.
// To update DOM elements on update, you need to call the update|reload|refresh methods with the updateStatic flag.
// Default: false
//static: false,
// Saving the initial values of children template arguments.
// This option can be overridden by the fcfInitialStorageOfChildren template argument.
// Default: false
//initialStorageOfChildren: false,
// The template is displayed when the template is locked or false,
// then the lock is performed only by the transparent container.
// If the option is true, then @controls:lock is used.
// This option can be overridden by the fcfLockTemplate template argument.
// Default: true
//lockTemplate: true
}
И добавим код враппера основного шаблона, в котором будет реализовано добавление и удаление строки в массиве _strings
Файл :templates/blocks/moving-containers.wrapper.js
В приведенном коде обратим внимание на три нюанса.
Рендеринг шаблона вкладок использует вложенный аргумент шаблона
Так же обратите внимание на то, как выполняется вызов методов onRemoveString() и onAddString() основного шаблона. Обращение к данным метода выполняется через метод
В коде враппера внутри методов onRemoveString() и onAddString() выполняется вызов метода
Теперь откройте приложение в окне браузера и увидите результат.