У меня есть этот класс Javascript (сокращен до необходимых частей):
function DigitalChannel ($xmlDoc) {
var self = this;
// Parse definition from $xmlDoc
self.firstRender = function (rootElem) {
var html = ""; // Build HTML string to display object information
rootElem.html (rootElem.html () + html); // Make above HTML visible
self.paper = Raphael ("digDot" + self.numIndex, 54, 38);
self.svgImage = self.paper.circle (30, 20, 15).attr ({
"stroke-width": "2",
"stroke": "#000000",
"fill": "#00FF00"
});
}
self.updateStatus = function (newState) {
self.state = newState;
if (self.state !== self.normalState) {
self.svgImage.attr ("fill", "#FF0000");
}
else {
self.svgImage.attr ("fill", "#00FF00");
}
}
}
Теперь, пожалуйста, предположим, что все переменные, используемые в моих методах, были правильно инициализированы из данных XML (я убедился, что это так в Firebug). Цифровой канал может иметь значение 0 или 1 и нормальное значение 0 или 1. Если текущее значение соответствует нормальному значению, я хочу, чтобы нарисованный круг был зеленым, в противном случае - красным. Тогда у меня есть этот класс:
function PageManager () {
var self = this;
self.base_url = "http://" + location.hostname + "...";
self.digital_channels = new Array ();
var fullPath = self.base_url + "...";
$.ajax (fullPath,
{
type: "post",
cache: true,
context: self,
success: function (data) {
$xmlDoc = $($.parseXML (data));
$xmlDoc.find ("channel").each (function () {
self.digital_channels.push (new DigitalChannel ($(this)));
});
}
});
self.firstRender = function () {
for (i in self.digital_channels) {
self.digital_channels[i].firstRender ($("#rootElem"));
}
}
self.updateDigitals = function () {
var fullPath = self.base_url + "...";
$.ajax (fullPath,
{
type: "post",
cache: true,
context: self,
success = function (data) {
var digital_idx = 0;
var mask = 0x0001;
$xmlDoc = $($.parseXML (data));
$xmlDoc.find ("digital_inputs").each (function () {
var bits = parseInt ($.trim ($(this).text ()));
for (i = 0; i < 32; i++) {
self.digital_channels[digital_idx].updateState (bits & mask);
bits = bits >>> 1;
digital_idx += 1;
}
});
}
});
}
}
Итак, на данный момент я определил все, что мне нужно, и затем я делаю это:
var pageManager = new PageManager ();
pageManager.firstRender ();
pageManager.updateDigitals ();
Опять же, предположим, что все происходит в правильном порядке. Фактические классы являются более сложными, и ничто не будет вызвано раньше времени. Я использовал Firebug для пошагового прохождения всего, и сейчас у меня есть страница из 64 зеленых точек после pageManager.firstRender ();, что я и хочу. Когда я звоню pageManager.updateDigitals ();, я должен видеть, что первые 32 точки остаются зелеными, а следующие 32 точки становятся красными. Я видел, как внутри кода все идет хорошо, даже до того момента, когда DigitalChannel.updateState (newState); фактически меняет цвет круга svgImage; однако только самая последняя точка визуально меняет цвет. Я прошу прощения за такой длинный вопрос, но кто-нибудь знает, почему?