更新多くのラファエル論文

Question

私はこの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を使ってすべてを進めてきましたが、今は私が望んでいるのはpageManager.firstRender();の後にある64個の緑色の点のページです。 pageManager.updateDigitals();と呼ぶと、最初の32ドットが緑色になり、次の32ドットが赤色に変わるのがわかります。私はコード内ですべてが内部的にOKになったのを見たことがあります。DigitalChannel.updateState (newState);の色が実際にsvgImageの円に変わってしまっています。しかし、最後のドットだけが視覚的に色を変える。私はこのような長い質問をお詫びしますが、なぜ誰にも分かりませんか？

Answer 1

タイミングの問題であることが判明しました。 Raphael紙を保持していたHTMLを作成してすぐに紙を作成すると、何かが混乱してしまったので、紙の作成に遅れを加えました。

Answer 2

DigitalChannelでself.normalStateが定義されていない可能性がありますか？