關於Dojo自定義小部件和DOM的驗證

Question

FIY我知道這很長，我在這裏有幾個問題，但都是由於我試圖瞭解DOM中的不同部分，一旦我的自定義小部件實例化並添加到DOM，以及它們如何與我的自定義小部件的代碼進行各種關聯。我對此感到非常頭痛，所以如果有人能夠澄清我在這裏的想法，這將是非常好的。 （注意：當然，我已經閱讀了dojo站點上的大量文檔，但有時候仍然很難驗證一些我希望在這篇文章中希望做的事情，以便讓自己放心，我知道什麼是怎麼回事）

因此，可以說在標記我已經這樣定義：

<input id="txtPercent" /> 

我實例化編程方式像這樣在我的單元測試類：

  percentTextBoxProgrammatically = new PercentTextBox({ 
         type: "text", 
         name: "percentEntry", 
         id: "percentTextBox", 
         value: 70, 
         required: true, 
         //constraints: "{min:1,max:100, places:0}" 
         //constraints: "{places:0}" 
        }, 
        dojo.byId("txtPercent")); 
        percentTextBoxProgrammatically.startup(); 

而一旦DOM完成渲染，我檢查出通過螢火渲染頁面及其相關的標記，看看這個：

<div id="widget_percentTextBox" class="dijit dijitReset dijitInline dijitLeft dijitTextBox dijitNumberTextBox" role="presentation" widgetid="percentTextBox"> 
<div class="dijitReset dijitValidationContainer"> 
<div class="dijitReset dijitInputField dijitInputContainer"> 
<input id="percentTextBox" class="dijitReset dijitInputInner" type="text" autocomplete="off" data-dojo-attach-point="textbox,focusNode" aria-valuemin="-9000000000000000" aria-valuemax="9000000000000000" tabindex="0" aria-valuenow="70" aria-invalid="false" aria-required="true"> 
<input type="hidden" name="percentEntry" value="70"> 
</div> 
</div> 

文本框顯示70％後，我的格式踢

所以在這裏是我的問題，或只是試圖驗證，如果我在這是正確的：

1）<input id="percentTextBox"...> - 這是我的實際部件（這是DOM代表）我假設？

2）與＃1相關的是，在輸入標記中沒有看到HTML「value」屬性，這在DOM中看不到這個屬性是正常的嗎？例如我沒有看到

<input id="percentTextBox" value="70"> 

或

<input id="percentTextBox" value="70%"> 

3）<input type="hidden" name="percentEntry" value="70"> - 所以這是堅持的控件的值屬性的方法嗎？因此，在實例化中設置percentTextbox輸入值後，從那裏開始，隱藏字段用於保留用戶在文本框中進行的任何更改（當它們更改值時）？

4）現在回到我的自定義小部件的代碼，當我使用this.value時，這是隱藏字段（<input type="hidden" ...>）中的值嗎？

同樣，當我與this.textbox.value工作我假設這是指我的<input id="percentTextBox"...>這是當前輸入到文本框中的值（你在文本框中看到iself）？

6）我注意到，當我將注意力集中到文本框時，每次我將注意力放在文本框上時，它就會觸發NumberTextBox解析器函數。我想這是預期的？我知道解析器在實例化中起作用，但我想它也會每次（onFocus）重新集中並單擊到文本框中？不知道如何解析工作，但我已經有了例如在數字框和我的自定義的Widget這個分析器功能繼承此NumberTexBox：

_parser: function(/*String*/ expression, /*number.__FormatOptions*/ constraints) { 
     var i = expression.lastIndexOf("%"); 

     if(i != -1) { 
      var value = number.parse(expression.substr(0, expression.length-1)); 
      expression = (value * 100).toString(); 
     } 

     expression = (expression * 100).toString(); 
     return number.parse(expression, constraints); 
    }, 

7），以驗證。通過上面的解析器，我假設它解析了我的自定義小部件的this.textbox.value，它對應於<input id="percentTextBox">的值？所以它在本質上將用戶輸入到文本框中的值（以及通過在其末尾添加％來格式化）並解析該值。還是它解析<input type="hidden" name="percentEntry" value="70">的隱藏值？

我只是想了解這裏的基礎知識（包括dojo基礎知識和實際的DOM基礎知識），以及如何將所有這些連接在一起，以及什麼是引用或表示DOM與我的實例化小部件以及我的小部件的屬性/屬性等

Answer 1

1）這些是您的小部件的實際DOM節點。 Dojo中的大多數小部件都使用模板來替換原始DOM節點和解析模板。 但是，您的小部件不僅僅是DOM節點。您的小部件不在JavaScript對象之外，它具有對DOM節點的引用等等。這個小部件是你的percentTextBoxProgrammatically。 2）大部分像值這樣的東西都是在屏幕後面處理的。像前點

percentTextBoxProgrammatically.get('value'); 

3），你永遠不應該在DOM直接插入值：永遠不要直接從DOM節點訪問value，而是通過你的控件對象訪問，通常通過。你的JavaScript對象可能可以處理得與

percentTextBoxProgrammatically.set('value', 70); 

4）根據的NumberTextBox的API Documentation（我假設您的自定義窗口小部件是基於）屬性value確實是輸入DOM節點的值。

6）你的小部件比你想象的要多。具有某種驗證或解析機制的小部件（例如，將其轉換爲70％到70％）將完成這些工作。

這個_parser函數看起來像是將您的值轉換爲百分比，反之亦然。它必須在您每次關注時執行（因爲70的內部值將轉換爲70％），並且當您更改該值（如果輸入85％，則需要將其轉換爲85）。

7）隱藏值可能在內部使用，或者爲了正確呈現您的小部件。你不應該真正理解它，因爲每個部件（及其實現）都不相同。例如，如果您使用FilteringSelect，它還會在隱藏字段中存儲大量數據。