Определение методов в разметке

В дополнение к возможности создавать методы для управления и расширения виджетов непосредственно в программном коде JavaScript Dojo также обеспечивает возможность определять программный код JavaScript непосредственно в разметке – с помощью специального атрибута type="dojo/method" в тегах SCRIPT. Это может быть очень удобно для дизайнеров, а также для всех тех, кто хочет быстро опробовать новую идею. В возможности определять методы непосредственно в разметке есть одна примечательная особенность, которая заключается в том, что ключевое слово this ссылается на сам виджет, благодаря этому у вас имеется непосредственный доступ к требуемому контексту. Рассмотрим следующий дополненный пример, где выполняется определение методов в разметке:



(body class="tundra")

constraints="{min:0,max:10000}" value=1000>



(button dojoType="dijit.form.Button" onClick="mySpinner.reset()")
Reset
(/button)
(/body)


В результате изменений атрибут jsId присвоил виджет NumberSpinner глобальной переменной mySpinner, которая используется в методе onClick кнопки.


Фактическое тело метода reset реализовано в виде специализированного тега script внутри диджита. Тег script с типом dojo/method, в котором реализована анонимная функция, выполняется после запуска функции constructor, поэтому будут доступны любые значения, переданные в виде атрибутов в разметке.

Кроме того, обратите внимание, что в предыдущем примере для создания виджета использовался элемент input, а в новом примере – тег div. Причина, по которой тег input не может использоваться в данном случае, заключается в том, что он не обладает свойством innerHTML. Чтобы иметь возможность добавить определение метода в разметку, элемент должен обладать свойством innerHTML. Если вы зададитесь вопросом, почему тег div не использовался и раньше, замечу, что это восходит к следующей исходной задаче: возможности иметь семантически правильную страницу, способную выполнять свои функции без участия JavaScript. Проще говоря, предыдущая форма, где используется элемент input, будет содержать семантически корректный элемент ввода, даже если поддержка JavaScript в броузере окажется отключенной (по тем или иным причинам), тогда как страница с виджетом в теге div – нет. В большинстве случаев это не является проблемой, но, создавая страницы, допускающие деградацию функциональных возможностей, очень важно знать основы языка разметки HTML и иметь представление о подобных подводных камнях.

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

Ниже приводится измененный вариант тега script с типом dojo/method, который производит тот же эффект, но за счет меньшего объема программного кода:


Вместо однократного вызываемого автоматически выполнения сразу после конструктора, который реализуется в случае с анонимной функцией в теге script с типом dojo/method, такой подход фактически выполняет создание метода reset, который затем присоединяется к виджету.


Если бы этот метод требовал наличия входных аргументов, в разметке можно было бы определить дополнительный атрибут args. Например, атрибут args="foo,bar,baz" позволил бы передачу трех именованных параметров методу, определенному в разметке.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
WAI-ARIA
Библиотека Dijit для дизайнеров
Диджиты приложения
Диджиты размещения
Диджиты форм

Вернуться в раздел: Dojo / Обзор Dijit