Использование селекторов классов для получения виджетов Dojo: хорошо или плохо?

Вопрос:

Я использую Dojo 1.9 для веб-приложения, которое я пишу, используя WebSockets. Когда клиент получает сообщение от сервера, мне нужно обновить некоторые виджеты с полученными данными.

// sock is the client-side of the websocket
sock.onmessage = function (dataIn) {
// clientManager defined elsewhere
clientManager.fireMessageReceived(dataIn);
};

Здесь моя проблема: в тот момент, когда я получаю данные, у меня нет идентификаторов, узлов DOM или виджетов для доступа к свойствам/значениям, которые необходимо обновить. clientManager конкретно занимается событиями носка и не имеет каких-либо конкретных знаний о виджетах, которые будут обновлять его данные. Кроме того, возможно иметь несколько экземпляров одного и того же виджета, поэтому я думаю, что попытка сохранить коллекцию существующих виджетов (или идентификаторов), так как свойство менеджера клиента может получить волосатое довольно быстро.

Итак, мое решение состояло в том, чтобы использовать классы CSS.

Я создал пустой класс и назначил его моему виджету:

.myXYZWidget {

}

так что в моей функции fireMessageReceived я могу использовать dojo/query чтобы найти его:

var myXYZWidgets = dojo.query(".myXYZWidget");
var i;

for (i = 0; i < myXYZWidgets.length; i++) {
var xyzWidget = registry.byNode(myXYZWidgets[0]);

... // Now I have my Dojo widget, I can upate to my heart content
}

Это работает, и я не вижу каких-либо серьезных недостатков для этого, но это нормально или это плохо плохо плохо? Может ли кто-нибудь из сообщества, который знает Доджо, подтвердить это решение или предложить лучший?

Лучший ответ:

Класс не обязательно CSS. Таким образом, вы не используете CSS для получения виджетов Dojo, вы просто получаете доступ к виджетам с помощью селектора/запроса.

Если я подумаю о вашей проблеме, я бы подумал о шаблоне издателя/подписчика, где ваш веб-сайт является вашим издателем (поскольку он получает данные и нуждается в его передаче вашим виджетам), а ваши виджеты — ваши подписчики.

Абонент (виджетов)

К счастью для вас, у dojo есть что-то для этого, и это называется модулем dojo/topic. Когда вы создаете свой виджет, вы как-то хотите убедиться, что он является подписчиком данных, которые получает ваш веб-узел. Чтобы сделать это, я бы сделал что-то вроде этого (я использую dijit/form/Select в моем примере, но вы можете переписать его так, как хотите):

lang.mixin(mySelect, {
    __getData: function(data) {
         this.addOption(data);   
    }
});
mySelect.own(topic.subscribe("my/event", lang.hitch(mySelect, '__getData')));

То, что здесь происходит, довольно легко (хотя это может выглядеть тяжело). Первое, что я делаю, — убедиться, что у моего виджета есть дополнительный метод __getData. Этот метод получит данные из websocket и обновит его на основе данных.

Затем я удостоверяю, что виджет подписан на события с именем my/event (вы увидите, что это означает в то время).


Издатель (websocket)

Затем на уровне вашего кода websocket вы хотите опубликовать тему с именем my/event, чтобы ваши виджеты узнали об этом.

Вы можете сделать это следующим образом:

topic.publish("my/event", myData);

Где myData — это данные, полученные с вашего веб-сайта.


Итак, теперь поток завершен. Ваш код веб-камеры будет передавать данные тем, кто хочет слушать. Слушатели (виджеты) будут использовать данные и что-то делать с ним, например, добавлять элементы к себе.

Я также сделал JSFiddle, показывающий полный пример. Это решение может выглядеть более сложным, но я считаю это прагматически более правильным.

Оцените статью
TechArks.Ru
Добавить комментарий