Управление аргументами и применение ссылок

Теперь попробуем управлять значениями аргументов шаблона "period", "feq" и "pause" в подшаблоне templates/blocks/planet.tmpl+earth.

Для этого мы будем использовать ссылочные аргументы, которые создаются функцией fcf.argRef(), при обращении к данному типу аргумента выполняется не прямое чтение или запись значения, а обращение к данным на которые указывалось при создании аргумента.

Для начала мы создадим в основном шаблоне :templates/blocks/planet.tmpl экземпляры аргументов "period", "feq" и "pause" c немного измененными значениями, что бы убедиться, что наш механизм работает.

Файл :templates/blocks/planet.tmpl

... //~ARGUMENTS { fcfStyleInner: fcf.argVal("display: block; overflow: hidden; width: @{{args.width}}@; height: @{{args.height}}@"), width: "100%", height: "300px", starsCount: 100, stars: fcf.argProg(), feq: 5, period: 2, pause: false, } ...

И передадим эти значения в подшаблон templates/blocks/planet.tmpl+earth. Но не прямым значением а ссылочным аргументом. Для этого снова отредактируем шаблон :templates/blocks/planet.tmpl.

Файл :templates/blocks/planet.tmpl:

... //~TEMPLATE <div class="planet-container"> <div class="star-container"> %{{ for(let i = 0; i < args.stars.length; ++i) { }}% <div class="star" style="left:@{{args.stars[i].left}}@%; top: @{{args.stars[i].top}}@%; animation-duration: @{{args.stars[i].duration}}@s; animation-delay: @{{args.stars[i].delay}}@s;"></div> %{{ } }}% </div> <div class="planet-sun-container"> <div class="planet-sun-container-item"> <div class="planet-sun"></div> </div> </div> @{{ render.template("+earth", {period: fcf.argRef("period"), feq: fcf.argRef("feq"), pause: fcf.argRef("pause") }); }}@ </div> ...

Теперь если мы будем менять значения в основном шаблоне во время работы приложения, аргументы подшаблона также поменяются.

Для динамического изменения аргументов шаблона бы будем использовать шаблон редактора целочисленных значений @controls:int-edit из пакета fcfControls.

Добавим еще один подшаблон "controls", в котором и разместим элементы управления.

Конец файла :templates/blocks/planet.tmpl

... //~OPTIONS controls { autoUpdate: true, } //~ARGUMENTS controls { fcfClassInner: "planet-controls-container", } //~TEMPLATE controls <p> <div class="planet-title-control">!{{Period}}!: </div>@{{ render.template("@controls:int-edit", {value: fcf.argRef("period"), min: 1, width: 80})}}@ </p> <p> <div class="planet-title-control">!{{Frequency}}!: </div>@{{ render.template("@controls:int-edit", {value: fcf.argRef("feq"), min: 1, width: 80})}}@ </p> <p> <div class="planet-play-control" fcfEventClick="wrapper.setArg('pause', !wrapper.getArg('pause'))">@{{ args.pause ? ` >>> ${fcf.t("Play")} <<<` : `>>> ${fcf.t("Pause")} <<<` }}@</div> </p>

И выполним вывод нашего нового подшаблона, передав ссылки на аргументы, которыми мы будем управлять.

Файл :templates/blocks/planet.tmpl:

... //~TEMPLATE <div class="planet-container"> <div class="star-container"> %{{ for(let i = 0; i < args.stars.length; ++i) { }}% <div class="star" style="left:@{{args.stars[i].left}}@%; top: @{{args.stars[i].top}}@%; animation-duration: @{{args.stars[i].duration}}@s; animation-delay: @{{args.stars[i].delay}}@s;"></div> %{{ } }}% </div> <div class="planet-sun-container"> <div class="planet-sun-container-item"> <div class="planet-sun"></div> </div> </div> @{{ render.template("+earth", {period: fcf.argRef("period"), feq: fcf.argRef("feq"), pause: fcf.argRef("pause") }); }}@ @{{ render.template("+controls", {period: fcf.argRef("period"), feq: fcf.argRef("feq"), pause: fcf.argRef("pause") }); }}@ </div> ...

Если все сделано правильно, то в браузере мы увидим почти законченное приложение. Но давайте, разберемся, что выполнялось в подшаблоне +controls

Для управления значениями "feq" и "period" мы использовали шаблон редактора для типа integer (шаблон @controls:int-edit). В качестве основного аргумента "value" мы передали ссылку, а так же ограничили минимальное вводимое значение аргументом min до 1. И для красоты установили его ширину равную 80 пикселям.

Теперь рассмотрим управление состоянием аргумента "pause". Его значение выполняется прямо в обработчике DOM события click. В фреймворке могут использоваться атрибуты обработки событий, которые начинаются с префикса fcfEvent, за которым следует имя DOM события. Данных механизм сделан для удобства, так как в нем доступны объекты самого шаблона wrapper, владельца шаблона parent и конечно объект самого события event.

В обработчике события fcfEventClick мы просто меняем значение аргумента "pause" на противоположное. Для этого применяются методы wrapper.getArg() и wrapper.setArg()

Вывод надписи Pause/Play выполняется в конструкции вывода @{{}}@ с применением перевода на язык пользователя. Для этого используется функция fcf.t().

Теперь можно вернуть аргументы "period" и "feq" к нормальным значениям.

Файл :templates/blocks/planet.tmpl:

... //~ARGUMENTS { fcfStyleInner: fcf.argVal("display: block; overflow: hidden; width: @{{args.width}}@; height: @{{args.height}}@"), width: "100%", height: "300px", starsCount: 100, stars: fcf.argProg(), feq: 60, period: 10, pause: false, } ...

Запустите в браузере приложение и убедитесь как меняются значения аргументов шаблона.