Обработка событий в Додзё

Question

Принимая советы Джеффа Этвуда , я решил воспользоваться Библиотека JavaScript для самого простого приложения списка дел, которое я пишу. Я выбрал инструментарий Dojo , версия 1.1.1. Сначала все было хорошо: код перетаскивания, который я написал, работал впервые, вы можете перетаскивать задачи на экран, чтобы изменить их порядок приоритета, и каждая операция перетаскивания вызывает обработчик событий, который отправляет AJAX. позвоните на сервер, чтобы сообщить, что порядок был изменен.

Затем я добавил функцию отслеживания электронной почты. Стандартный материал: к новым входящим электронным письмам присваивается уникальный идентификационный номер, прикрепленный к их строке темы, все последующие электронные письма об этой проблеме можно отслеживать, просто оставив этот идентификационный номер в теме при ответе. Итак, у нас есть список открытых задач, каждая из которых имеет свой идентификационный номер, и у каждой из этих задач есть упорядоченный по времени список связанных писем. Я хотел, чтобы текст этих электронных писем был доступен пользователю, когда он просматривал свой список задач, поэтому я сделал каждый блок задач Dijit " Дерево " control - верхний уровень содержит описание задачи, ветви содержат даты электронной почты и один " лист " off каждой из этих веток содержит текст письма.

Первая проблема: я хотел, чтобы представление дерева было полностью свернуто по умолчанию. После тщательного поиска в Google я нашел несколько решений, которые, как мне показалось, действительны для предыдущих версий Dojo, но не те, которые я использовал. В конце концов я понял, что наилучшим решением, по-видимому, было бы вызывать обработчик событий при загрузке элемента управления Tree, который просто сворачивал каждую ветвь / лист. К сожалению, несмотря на то, что был создан экземпляр элемента управления Tree и его "запуск" Вызван обработчик событий, ветви и листья все еще не загружены (данные все еще загружались с помощью вызова AJAX). Итак, я изменил систему так, чтобы весь текст электронной почты и древовидная структура добавлялись на стороне сервера. Это означает, что весь полностью заполненный элемент управления Tree доступен при вызове обработчика события запуска.

Итак, обработчик событий запуска полностью сворачивает дерево. Затем я не смог найти " правильный " способ иметь хороший форматированный текст для письма. Я могу просто поместить текст письма в лист, но любой HTML-код выходит и отображается на веб-странице. Более подробно рассмотрите документацию Dojo (как правило, устаревшую, с кодом и примерами для версий до 1.0) и Google. В конце концов я нашел решение заставить JavaScript идти и читать элемент SPAN, который находится внутри каждого конечного узла, и не использовать экранированный код HTML в его innerHTML. Я решил поместить код, чтобы сделать это с кодом полного коллапса в дереве, в обработчике событий запуска элемента управления Tree.

Однако ... оказывается, что элемент SPAN фактически не создается до тех пор, пока пользователь не щелкнет по кнопке "развернуть" (маленький символ "+" в древовидном представлении, который вы щелкаете, чтобы развернуть узел). Хорошо, достаточно справедливо - я добавлю код переформатирования в обработчик события onExpand (), или как он там называется. Которого, кажется, не существует. Я искал в документации, я искал в Google ... Я, вероятно, неправильно понимаю, что Dojo's "опубликовать / подписаться" система обработки событий, но я думаю, что в основном потому, что, кажется, нигде нет исчерпывающей документации (например, где я могу узнать, на какие события я могу подписаться?).

Итак, в конце концов, лучшее решение, которое я могу найти, - это добавить обработчик события onClick (не событие " Dojo " но обычное событие JavaScript, о котором Dojo ничего не знает) в узел расширения каждого Ветвь дерева, которая переформатирует HTML внутри элемента SPAN каждого листа. За исключением ... когда это вызывается, элемент SPAN все еще не существует (иногда - иногда

Answer 1

Я предполагаю, что вы следовали за dijit.Tree и dojo.data в учебнике Dojo 1.1 , в котором вам было поручено передать данные в древовидный элемент управления с помощью хранилища данных. Это заставило меня долго биться головой о кирпичную стену.

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

Вы найдете реализацию модели по умолчанию в вашем дистрибутиве dojo по адресу ./dijit/_tree/model.js. Комментарии должны помочь вам понять функции, поддерживаемые моделью.

Класс IDirectoryService, код которого приведен ниже, является заглушкой для серверных Java POJO, созданных с помощью Direct Web Remoting (DWR). Я настоятельно рекомендую DWR, если вы собираетесь активно взаимодействовать с клиентом и сервером.

dojo.declare("LDAPDirectoryTreeModel", [ dijit.tree.model ], {
    getRoot : function(onItem) {
        IDirectoryService.getRoots( function(roots) {
            onItem(roots[0])
        });
    },

    mayHaveChildren : function(item) {
        return true;
    },

    getChildren : function(parentItem, onComplete) {
        IDirectoryService.getChildrenImpl(parentItem, onComplete);
    },

    getIdentity : function(item) {
        return item.dn;
    },

    getLabel : function(item) {
        return item.rdn;
    }
});

А вот выдержка из моей страницы JSP, где я создал модель и использовал ее для заполнения элемента управления деревом.

<div
  dojoType="LDAPDirectoryTreeModel"
  jsid="treeModel"
  id="treeModel">
</div>
<div
  jsid="tree"
  id="tree"
  dojoType="dijit.Tree" model="treeModel"
  labelAttr="name"
  label="${directory.host}:${directory.port}">
</div>